How jasonkneen/codefolio works
Codefolio is a local-first web app for building executable notebooks on a freeform desk. Users add or import notebook content, edit Markdown and JavaScript cells, run code in a persistent sandbox, and view rich results inline; named-cell references can connect values across cells and notebooks. The canvas and notebook store coordinate editing and persistence. A separate source-project workflow compiles selected notebook source for preview, walkthrough, and ZIP export. The README documents several capabilities whose exact internal wiring is not visible in the sampled excerpts, so those links are limited to supported entry points.
Main entry points: store.ts Notebook store · notebook-document.tsx Notebook document · project-preview.tsx Project preview · runtime.ts Cell runtime
Components 25
Desk canvas
- App shell
src/routes/__root.tsx - Folio canvas
src/components/canvas/folio-canvas.tsx - Desk layout
src/components/canvas/desk-stack.tsx - Workspace sidebar
src/components/canvas/workspace-sidebar.tsx
Notebook editing
- Notebook document
src/components/notebook/notebook-document.tsx - Code cell
src/components/notebook/code-cell.tsx - Markdown cell
src/components/notebook/markdown-cell.tsx - Artifact cell
src/components/notebook/artifact-cell.tsx - Media cells
src/components/notebook/image-cell.tsx - Notebook store
src/lib/notebook/store.ts - Desk persistence
src/lib/notebook/persistence.ts - Cell output
src/components/notebook/cell-output.tsx
Cell execution
- Sandbox kernel
src/lib/notebook/sandbox-kernel.ts - Cell runtime
src/lib/notebook/runtime.ts - Cell references
src/lib/notebook/cell-references.ts - Output inspection
src/lib/notebook/inspect.ts
Source projects
- Project preview
src/components/canvas/project-preview.tsx - Project compiler
src/lib/artifacts/project-compiler.ts - Preview frame
src/lib/artifacts/frame.ts - Project assistant
src/lib/artifacts/project-assistant.ts - Project export
src/lib/artifacts/project-export.ts - Artifact templates
src/lib/artifacts/templates.ts
Other components
- Notebook author
- Browser localStorage
- Project ZIP
Connections 32
- Notebook author → App shell: opens app
- App shell → Folio canvas: mounts
- Folio canvas → Desk layout: shows desk
- Desk layout → Notebook document: renders notebook
- Folio canvas → Notebook store: updates desk
- Workspace sidebar → Notebook store: manages notebooks
- Notebook author → Notebook document: edits cells
- Notebook document → Code cell: renders code
- Notebook document → Markdown cell: renders notes
- Notebook document → Artifact cell: renders artifacts
- Notebook document → Media cells: renders media
- Notebook document → Notebook store: dispatches edits
- Notebook store → Desk persistence: persists desk
- Desk persistence → Browser localStorage: reads/writes
- Notebook store → Sandbox kernel: runs cells
- Sandbox kernel → Cell runtime: evaluates code
- Cell runtime → Cell references: resolves references
- Cell runtime → Output inspection: formats values
- Cell runtime → Sandbox kernel: returns results
- Code cell → Notebook store: requests run
- Cell output → Notebook document: renders results
- Notebook store → Cell output: provides cell output
- Notebook author → Workspace sidebar: imports source
- Notebook author → Project preview: previews project
- Project preview → Notebook store: reads source notebooks
- Project preview → Project compiler: compiles modules
- Project preview → Preview frame: creates preview
- Project preview → Project assistant: requests explanation
- Project preview → Project export: builds project
- Project export → Project compiler: compiles modules
- Project export → Project ZIP: packages files
- Notebook store → Artifact templates: uses templates