Convert Taleem schema into HTML slides
npm install taleem-slides> Render slide JSON → HTML (nothing more, nothing less)
taleem-slides is a small, focused rendering library.
It takes validated slide JSON and returns HTML strings using fixed, opinionated layouts.
No player.
No timing.
No DOM.
Just HTML.
> Assumes slide JSON is already validated by upstream tools.
---
👉 https://bilza2023.github.io/taleem
This site is the source of truth for:
- supported slide types
- exact visual layouts
- real rendered output
- examples and behavior
If something here and the site disagree, the site wins.
---
- Converts slide JSON into HTML
- Implements fixed slide layouts
- Applies minimal state-based CSS classes
- Works in browser, player, SSR, or Node
---
taleem-slides does not:
- manage time or animations
- navigate slides
- validate decks or schemas
- apply CSS
- touch the DOM
- control presentation flow
Those responsibilities live outside this library.
---
``
slide JSON
↓
taleem-slides
↓
HTML string
``
That’s it.
How the HTML is:
- shown
- styled
- animated
- timed
…is your responsibility.
---
`bash``
npm install taleem-slides
---
`js
import { getSlideTemplate } from "taleem-slides";
const Slide = getSlideTemplate("bulletList");
`
---
`js`
const slide = Slide.fromJSON({
type: "bulletList",
data: [
{ name: "bullet", content: "First point" },
{ name: "bullet", content: "Second point" }
]
});
fromJSON():
* reads structure
* prepares render logic
* does not touch the DOM
---
`js`
const html = slide.render({
visibleCount: 1,
activeIndex: 0
});
You decide what to do with the HTML.
---
Render state is a plain object.
Only pass what you need.
`ts`
{
visibleCount?: number
activeIndex?: number
}
Each slide reads only the fields it cares about.
---
Slides may emit state classes and slide-specific structural classes only.
State classes:
`text`
.is-active
.is-dim
.is-hidden
All layout, color, animation, and transitions are external.
---
See the live reference for visuals and examples:
👉 https://bilza2023.github.io/taleem
Categories include:
* titles and text
* bullet lists and columns
* images and image+text layouts
* tables and charts
* quotes, stats, and numbers
* equation slides (experimental)
---
The eq slide type is experimental.
In v1 it is intentionally limited to:
* time-based line reveal
* a single active (highlighted) line
* optional side-panel annotations (spItems)
* deterministic windowing (older lines drop off)
It does not include:
* math rendering (KaTeX / MathJax)
* semantic math/text interpretation
* scrolling or centering behavior
The eq slide exists to validate the renderer contract,
not as a finished math presentation system.
---
Layouts are fixed by design.
New layouts = new slide templates.
---
* Deterministic output
* No hidden state
* No configuration knobs
* Same input → same HTML
Safe to cache. Safe to reuse.
---
taleem-slides` can be used:
* directly in browsers
* inside presentation players
* in SSR pipelines
* in static generators
* in educational tools
It is intentionally small so it can sit anywhere.
---
> **Render HTML only.
> Never control presentation logic.**
---