What problem does it solve?
Code editors and visual programming interfaces are essential for building modern software tooling in Svelte apps, but assembling robust editing, syntax highlighting, and node-based tooling typically requires pulling together multiple libraries. This skill provides a cohesive set of components (CodeEditor, CodeHighlight, and NodeCanvas) that plug into a Composable Architecture store, enabling rapid UI construction for development, documentation, and data workflows.
Core Features & Use Cases
- CodeEditor (CodeMirror) for immersive editing experiences
- CodeHighlight (Prism) for read-only syntax highlighting in docs and demos
- NodeCanvas (SvelteFlow) for visual node-based programming and workflows
- End-to-end integration with Composable Architecture patterns (store, reducer, effects) for predictable state management
- Use Case: Build in-app code editors, interactive tutorials, and visual programming tools within a Svelte app
Quick Start
Install the @composable-svelte/code package and create a store that wires CodeEditor, CodeHighlight, and NodeCanvas.
- Create a store using createStore and initialState via createInitialState from @composable-svelte/code
- Render CodeEditor with the created store
- Example (inline, no code fences):
import { createStore } from '@composable-svelte/core';
import { CodeEditor, codeEditorReducer, createInitialState } from '@composable-svelte/code';
const editorStore = createStore({
initialState: createInitialState({ value: '// Write code here', language: 'typescript', theme: 'dark', showLineNumbers: true }),
reducer: codeEditorReducer,
dependencies: {}
});
<CodeEditor store={editorStore} />
