Skip to main content

DHTMLX Kanban. Svelte integration example

This demo shows how to embed DHTMLX Kanban into a Svelte application. The Kanban board initalizes as a vanilla JavaScript widget inside a Svelte component. For a step-by-step setup guide, see the detailed Svelte integration guide.

Try it online

View on GitHub. Open the repository and click "Open in Codespaces" on the README page to launch a fully configured Svelte app with DHTMLX Kanban. No local setup required.

Solution overview​

  1. Create a custom Kanban.svelte component
  2. Use the bind:this directive to access DOM elements for Kanban and Toolbar containers
  3. Declare export let props for columns, cards, and rows data, and the cardShape config in the Svelte component
  4. In the onMount lifecycle hook, initialize Kanban with the new Kanban(kanban_container, { columns, cards, rows, rowKey, cardShape, editorShape, currentUser }) constructor
  5. Call the new Toolbar(toolbar_container, { api: kanban.api }) constructor to create a Toolbar instance and bind it to Kanban
  6. In the onDestroy lifecycle hook, call destructor() to clean up DOM nodes and event listeners for Kanban and Toolbar

API reference​

Additional resources​