Skip to main content
LisibleDocumentation
Live previewer

Discover Lisible

Architecture

Understand the shared core, variants, Astro routes and the ownership rule for every file.

The architecture strictly separates shared behavior from visual expression. This rule prevents SEO, i18n or editorial fixes from being repeated six times.

Islands architecture: static HTML and independent interactive components

Directory tree

lisible/
lisible/
├─ lisible.config.json
├─ package.json
├─ scripts/
├─ tests/
├─ e2e/
├─ packages/
│ ├─ lisible/
│ └─ create-lisible/
├─ shared/
│ ├─ config.ts
│ ├─ site.config.ts
│ ├─ features.ts
│ ├─ variants.ts
│ ├─ assets/
│ ├─ components/
│ ├─ content/
│ ├─ integrations/
│ ├─ lib/
│ ├─ markdown/
│ ├─ preview/
│ ├─ routes/
│ ├─ scripts/
│ ├─ print.css
│ └─ public/
└─ versions/
├─ _core/
├─ motion-primitives/
├─ cult-ui/
├─ aceternity/
├─ reactbits/
├─ organique/
└─ h4x0r/

Responsibilities

SurfaceOwnerExamples
Configurationlisible.config.jsonvariant, identity, flags, integrations
Contentshared/content/posts, schema, images
Identityshared/site.config.tsvalues derived from the configuration
Capabilitiesshared/features.tsflags derived from the configuration
Shared UIshared/components/appearance, preview bridge, profile hero, file tree
Browser runtimeshared/scripts/locale, cards, diagram full screen
Preview contractshared/preview/build base, settings protocol, frame navigation
Shared routesshared/routes/home, blog, tags, RSS
Content pipelineshared/lib/post queries, formatting, RSS, llms.txt, Open Graph
Build integrationsshared/integrations/self-hosted KaTeX assets
Printshared/print.csspaper rendering and PDF export
Designversions/*/src/layouts, components, animation
Orchestrationscripts/init, global preview, checks
Teststests/, e2e/unit tests, Playwright end-to-end suite
Scaffoldingpackages/the lisible and create-lisible npm CLIs

Post flow

Diagram
100%
Rendering diagram...
Scroll to zoom, drag to pan

The role of _core

versions/_core is the functional reference. The six public variants may use different components, but they must preserve the shared route baseline, data, error states and accessibility requirements.

A variant may add a showcase route when it stays additive and ships a complete FR/EN pair. Organique’s Certifications and Friends pages follow that rule: they do not replace Home, Blog, Tags, Archives, Series or About.

Preview boundary

PreviewBridge.astro and shared/preview/ are inert in a normal Lisible build. The documentation builder enables them with LISIBLE_PREVIEW=1, assigns each variant an isolated /_previews/<variant>/ base and exchanges validated settings and navigation messages with the parent previewer. This keeps preview-only noindex metadata, content switches and URL rewriting out of deployed reader sites.

Initial configuration describes shared surfaces and Themes and variants formalizes the presentation contract.

Imports and aliases

Astro source uses two aliases and only two: @/* points to src/* and @shared/* to shared/*. Shared MDX components therefore use imports such as @shared/components/ui/file-tree, and source modules never navigate upward with ../.

Modules loaded directly by astro.config.ts are the exception: configuration is evaluated before aliases are available, so they use relative paths. That covers the remark and rehype plugins, the language badge and the dictionaries the configuration imports.

The repository is a Bun workspace covering shared, versions/* and packages/*. The shared core is the @lisible/shared package; every variant depends on it with workspace:*, and a single root bun install links all of them. Each package declares the dependencies it actually uses in its own package.json instead of relying on accidental root resolution.

Documentation maintained with LisibleEdit this page ↗

Actions

Search for an API, a command or a concept.