One code snippet, multiple pedagogical lenses — portable JSON5 spec and <code-lens> web component with framework adapters.
Live demo »
Report Bug
·
Request Feature
Table of Contents
One snippet, multiple pedagogical naming conventions — the real lens for code examples (not a metaphor).
In Solid/React/Next you install a component — e.g. import { CodeLens } from "@code-lens/solid". Under the hood one shared engine powers every framework package; you don't touch that unless you're on plain HTML.
| Layer | Package |
|---|---|
| Component (your import) | @code-lens/solid, @code-lens/react, … |
| Skin | @code-lens/css or @code-lens/tailwind (planned) |
| Engine | @code-lens/vanilla + @code-lens/core (pulled in automatically) |
pnpm install
pnpm dev # SolidJS + solid-ui demo (port 5174) — mounts vanilla <code-lens>import "@code-lens/css";
import { createCodeLens, registerCodeLens } from "@code-lens/vanilla";
import { parseLensBlock, parseThemes, parseUi } from "@code-lens/core";
registerCodeLens();
const el = createCodeLens({
document: parseLensBlock(blockJson5),
themes: parseThemes(themesJson5),
ui: parseUi(uiJson5),
}, "earth");
document.body.appendChild(el);<code-lens theme="earth" appearance="auto"></code-lens>appearance: auto | light | dark — independent of pedagogical color theme.
slotHighlight: plain | box — rounded highlight on changeable tokens (default plain).
| File | Role |
|---|---|
spec/examples/*.json5 |
Aligned token data per lens |
spec/themes.json5 |
Color schemes (light/dark per theme) |
spec/ui.json5 |
Interaction + animation |
- Ecosystem / delivery model
- Full specification
- AI / LLM reproduction spec — normative porting detail
- Glass lens capabilities
- Implementation registry
Distributed under the MIT License. See LICENSE.
DevCentr.org — support@devcentr.org
Project Link: https://github.com/dev-centr/code-lens