A collection of reusable custom components for Altinn Studio, designed to provide consistent, standardized presentation of various data types in digital public services.
To integrate this package into your Altinn Studio application, follow the steps below.
npm init -ynpm install @arkitektum/altinn-studio-custom-components --saveAdd the following snippet to ensure npm packages are installed and
copied to wwwroot during the build:
<Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
<Exec Command="npm ci" Condition="'$(RestorePackagesWithLockFile)' == 'true'" />
<Exec Command="npm install" Condition="'$(RestorePackagesWithLockFile)' != 'true'" />
<Touch Files="node_modules/.install-stamp" AlwaysCreate="true" />
</Target>
<ItemGroup>
<MyAssets Include="node_modules/@arkitektum/altinn-studio-custom-components/**/*.*" />
</ItemGroup>
<Target Name="CopyAssetsToWwwroot" DependsOnTargets="NpmInstall" AfterTargets="Build">
<Message Text="Copying assets to wwwroot..." Importance="High" />
<MakeDir Directories="wwwroot/altinn-studio-custom-components" />
<Copy
SourceFiles="@(MyAssets)"
DestinationFolder="wwwroot/altinn-studio-custom-components"
SkipUnchangedFiles="true" />
</Target>Replace [ORG NAME] and [APP NAME] with the correct values:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/[ORG NAME]/[APP NAME]/altinn-studio-custom-components/main.css" />
</head>
<body>
<script type="module" src="/[ORG NAME]/[APP NAME]/altinn-studio-custom-components/main.js"></script>
</body>
</html>WORKDIR /App
RUN apk add --no-cache npmAfter these steps, npm packages will be installed automatically during
the build, and all assets will be copied into
wwwroot/altinn-studio-custom-components.
Components are grouped by category and tailored to display domain-specific data according to standards from Direktoratet for Byggkvalitet (DiBK) on the Fellestjenester BYGG platform.
For a full list of available components and examples, see the documentation site:
Component Documentation & Gallery
-
Clone the repository:
git clone https://github.com/Arkitektum/altinn-studio-custom-components.git
-
Move into the project directory:
cd altinn-studio-custom-components -
Install dependencies:
yarn install
-
Start the development server:
yarn start
Run unit tests:
yarn testDevTools mode adds inspection overlays to all custom components on the page, making it easier to debug and inspect component properties during development.
Add ?devtools=true to the URL of your Altinn Studio app:
http://local.altinn.cloud/[ORG NAME]/[APP NAME]?devtools=true/#/instance/.../PdfLayout
Each custom component gets a small badge button in its top-right corner. Clicking it opens an inspection panel showing the component's tag name, id, and all non-empty properties.
Components are color-coded by category:
| Badge | Category | Description |
|---|---|---|
| B | Base | Base components (blue) |
| D | Data | Data components (green) |
| L | Layout | Layout components (purple) |
Components that are conditionally hidden are rendered as a visible placeholder (dashed border) with a hidden label instead of being invisible, so you can still inspect their properties.
Clicking anywhere outside a panel closes it.
- Altinn Studio Documentation
- Altinn Studio GitHub Repository
- Altinn Studio Customm Component Documentation
- POC: Use of third party components in apps
The changelog is regularly updated to reflect what's changed in each new release.