Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
Node.svelte
<script lang="ts">
import { setContext } from 'svelte';
import Node from './Node.svelte';

let props = $props();

const page = $state({
node: {
tag: 'article',
children: [
{
tag: 'h1',
metadata: { editable: true },
text: 'H1'
},
{
tag: 'p',
metadata: { editable: true },
text: 'Lorem ipsum dolor sit amet, `consectetur` adipiscing elit. **Integer** dui nibh, luctus vitae interdum sit amet, blandit eget arcu. Quisque ut dolor porttitor, commodo arcu nec, sodales nisi. Maecenas facilisis dictum euismod. In hac habitasse platea dictumst. [Google](https://google.com)'
},
{
tag: 'p',
metadata: { editable: true },
text: 'Donec justo quam, mollis quis lacus vitae, egestas interdum mauris. Aenean suscipit porttitor leo sed mattis. Sed nec ligula libero. Sed semper bibendum dictum. Curabitur eget felis et justo dictum lacinia. Donec sed nisi mauris. Phasellus in erat libero.'
},
{
tag: 'p',
metadata: { editable: true },
text: ''
}
]
}
});

let active_node = $state(page.node.children[3]);

loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */