code-lens

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

1. About The Project
2. Installation
3. Usage
4. License
5. Contact

About The Project

One snippet, multiple pedagogical naming conventions — the real lens for code examples (not a metaphor).

Delivery model

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)

→ docs/ecosystem.md

(back to top)

Installation

pnpm install
pnpm dev # SolidJS + solid-ui demo (port 5174) — mounts vanilla <code-lens>

(back to top)

Usage

import"@code-lens/css";import{createCodeLens,registerCodeLens}from"@code-lens/vanilla";import{parseLensBlock,parseThemes,parseUi}from"@code-lens/core";registerCodeLens();constel=createCodeLens({document: parseLensBlock(blockJson5),themes: parseThemes(themesJson5),ui: parseUi(uiJson5),},"earth");document.body.appendChild(el);

<code-lenstheme="earth" appearance="auto"></code-lens>

appearance: auto | light | dark — independent of pedagogical color theme.

slotHighlight: plain | box — rounded highlight on changeable tokens (default plain).

Portable spec

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

(back to top)

License

Distributed under the MIT License. See LICENSE.

(back to top)

Contact

DevCentr.org — support@devcentr.org

Project Link: https://github.com/dev-centr/code-lens

Site: https://dev-centr.github.io/code-lens/

(back to top)