Components / Data & content

Content

Component + manager

Manages a nested tree of typed components, allowing dynamic rendering based on type_ids and attributes.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentContent

Managercreate_content_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Content, create_content_manager, markdown_to_astc } from "sveltekit-ui"

  const manager = create_content_manager({
    val: markdown_to_astc("## Welcome\n\nCompose **rich content** with the library's components."),
  })
</script>

<Content {manager} />

API reference

Configure the manager, call its methods, and read its reactive state.

8 entries in configuration

Property	Type	Default	Description
`val`	`object`	`null`	the top-level content node containing { type_id, selector_id, attributes, children }
`is_dark_theme`	`boolean`	`false`	if true, toggles usage of dark theme variants for certain components
`storage_path`	`string`	`/api/storage/{storage_id}`	template path for retrieving stored media, used by some child components (e.g. image, audio)
`variables`	`any`	`null`	external data object used by show_conditions or variable-based attributes
`mapkit_js_token`	`string`	`null`	token for mapkit if needed by location-based components
`on_event`	`function`	`null`	callback for setting or manipulating variables when certain components update
`on_search_table_row_ids`	`function`	`null`	callback that returns table row ids for table-row-based inputs (like table_row_id_input)
`table_options`	`object`	`null`	an object of additional options passed along to table-based components if present