Components / Input controls

Content Input

Component + manager

Offers a panel builder for creating and editing a nested content structure (ASTC format) with interactive insertion, removal, and attribute editing of various node types.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

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

ComponentContentInput

Managercreate_content_input_manager

svelte

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

  const manager = create_content_input_manager({
    val: markdown_to_astc("## Your article\n\nSelect a text element to edit it."),
  })
</script>

<div style="height: 50rem; max-height: 80vh;">
  <ContentInput {manager} />
</div>
<details>
  <summary>Document data</summary>
  <pre>{JSON.stringify(manager.val, null, 2)}</pre>
</details>

API reference

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

9 entries in configuration

Property	Type	Default	Description
`val`	`object`	`null`	the initial top-level ASTC node
`on_change`	`function`	`null`	callback triggered when the ASTC structure changes
`on_finish`	`function`	`null`	callback triggered when the user finishes editing
`on_event`	`function`	`null`	callback invoked for certain child content manager events
`definition_stack`	`any`	`null`	external definition_stack variables object for show_conditions or other variable-based usage
`mapkit_js_token`	`string`	`null`	token for mapkit if needed by location-based nodes
`storage`	`any`	`null`	storage definition used when uploading or managing files
`storage_default_folder_path`	`string`	`null`	default folder path for storage uploads
`storage_path`	`string`	`/api/storage/{storage_id}`	app-provided stored-media URL template used by previews and media pickers; the library provides no storage backend