Integrations

Frameworks

DNA composition is tested across different frameworks.

Framework	Version	Update a property	Slot text	Slot elements	Named slots	Builtin elements
Angular	20	✅	✅	✅	✅	⚠️¹
Lit	3	✅	✅	✅	✅	✅
Preact	10⁴	✅	✅	✅	✅	✅
React	19	✅	✅	✅	✅	⚠️²
Svelte	5	✅	✅	✅	✅	✅³
uhtml	4	✅	✅	✅	✅	✅
Vue	3	✅	✅	✅	✅	✅

• ¹ does not create and handle builtin custom elements. [issue]
• ² does not correctly update properties for builtin custom elements. [issue]
• ³ full support since v5.38.5
• ⁴ full typings support from v11

JSX

DNA has export specifiers for JSX integration with different frameworks.

React (global.d.ts)

import '@chialab/dna/react';

Preact (global.d.ts)

import '@chialab/dna/preact';

Svelte (src/app.d.ts)

import '@chialab/dna/svelte';

declare global {
	namespace App {
        // ...
    }
}

Hydration

Many frameworks support hydration of server-rendered HTML. DNA elements rendering starts once the node is connected, so it may interfere with the hydration process. To avoid this, you can delay DNA rendering until the framework is ready. For example, in Svelte

hooks.client.ts

import { isHydrating } from '@chialab/dna';

export const init = () => {
	isHydrating(true);
};

+layout.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import { isHydrating } from '@chialab/dna';

	onMount(() => {
		isHydrating(false);
	});
</script>

View libraries

Sometimes you need to encapsulate in DNA another UI library, like Mapbox or Pickr. Since DNA components are DOM nodes, the integration is possible using the element context as library param:

import { Component, customElement } from '@chialab/dna';
import Pickr from '@simonwep/pickr';

@customElement('color-picker')
class ColorPicker extends Component {
    private pickr: Pickr;

    connectedCallback() {
        super.connectedCallback();
        this.pickr = new Pickr({
            el: this,
        });
    }

    disconnectedCallback() {
        this.pickr.destroyAndRemove();
        super.disconnectedCallback();
    }
}