solid-outliner

A SolidJS outline editor component with hierarchical content organization, keyboard shortcuts, drag-and-drop, zoom navigation, undo/redo, and optional markdown rendering.

Ported from react-outliner with the same interaction model.

Features

• Keyboard shortcuts
  • Enter: Create new sibling (or split at cursor)
  • Shift + Enter: Create sibling before current item
  • Tab / Shift + Tab: Indent / outdent
  • Alt + ↑/↓: Move item up / down
  • ↑/↓: Navigate between items
  • Backspace on empty non-root item: Delete
  • Ctrl/Cmd + Z / Ctrl/Cmd + Shift + Z / Ctrl + Y: Undo / redo
• Expand / collapse
• Drag and drop reordering (before / inside / after)
• Zoom into a node with breadcrumb navigation
• Read-only mode
• Optional markdown renderer
• Dark mode via CSS variables (.dark class)

Installation

pnpm add solid-outliner solid-js

Usage

import { Outliner } from 'solid-outliner'
import 'solid-outliner/style.css'

const initialData = [
  {
    id: '1',
    topic: 'Root Node',
    children: [
      {
        id: '1-1',
        topic: '**Bold text** and *italic text*',
        children: [],
      },
    ],
  },
]

function App() {
  return (
    <div class="dark">
      <Outliner
        data={initialData}
        onChange={data => console.log(data)}
        markdown={text => text} // optional renderer
        readonly={false}
        fileName="My Outline"
      />
    </div>
  )
}

API

Props

Prop	Type	Default	Description
data	OutlineData[]	required	Initial outline data
onChange	(data: OutlineItem[]) => void	optional	Fired when outline changes
readonly	boolean	false	Read-only mode
markdown	(text: string, item: OutlineItem) => string	optional	Markdown/HTML renderer
fileName	string	optional	Shown in breadcrumb root
i18n	Partial<OutlinerI18n>	Chinese defaults	Menu / UI strings

Data structure

interface OutlineData {
  id: string
  topic: string
  children?: OutlineData[]
  expanded?: boolean // default: true
}

Development

pnpm install
pnpm dev      # demo app at http://localhost:3000
pnpm test     # unit tests
pnpm build    # library build

Tech stack

• SolidJS
• TypeScript
• Vite
• Vitest
• tsup (library build)