composable-svelte-code

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} />