composable-svelte-code_skill

Overview

This skill provides CodeEditor, CodeHighlight, and NodeCanvas components for Composable Svelte to enable code editing, syntax highlighting, and node-based visual programming. It bundles CodeMirror 6 for editing, Prism.js for read-only highlighting, and SvelteFlow for visual node canvases, all wired to composable stores and type-safe reducers. Use it to add interactive editors, documentation snippets, or visual workflow builders to Svelte apps.

How this skill works

Each component uses the Composable Svelte store/reducer pattern: you create a store with an initial state and reducer, then pass that store into the component. CodeEditor exposes editing features (autocomplete, linting, save/format hooks) via dependencies; CodeHighlight renders read-only highlighted snippets with optional line numbers and line highlighting; NodeCanvas manages nodes, edges, viewport, and interaction via actions dispatched to its reducer. All state transitions are explicit actions for predictable behavior and easy testing.

When to use it

• Add an embeddable, full-featured code editor with language support and toolbar controls.
• Render fast, read-only code snippets in docs, blogs, or tutorials with line highlighting.
• Build visual programming interfaces: flow editors, pipelines, or workflow designers.
• Require a type-safe, reducer-driven UI that is easy to test and mock.
• Need components that can lazy-load to improve initial page performance.

Best practices

• Lazy-load heavy components (CodeEditor, NodeCanvas) to reduce initial bundle size.
• Provide save and format handlers through dependencies to keep UI logic decoupled.
• Use CodeHighlight for large numbers of snippets to avoid the CodeMirror bundle cost.
• Limit node counts and disable animations for large NodeCanvas graphs; consider virtualization.
• Test reducers with TestStore and mock dependencies for deterministic unit tests.

Example use cases

• An online IDE panel with TypeScript/JavaScript editing, autosave, and formatting via a formatter dependency.
• Documentation pages that show highlighted code examples with specific lines emphasized using highlightLines.
• A visual workflow builder where users drag nodes, connect edges, and export the graph as JSON.
• A learning tool combining editable examples (CodeEditor) and explainers with read-only snippets (CodeHighlight).
• A design tool that wires custom node components into NodeCanvas for domain-specific visual programming.