I built Basely, an open-source way to turn React components into images. It’s a developer-first “visual content API”: keep your visuals as components and render consistent assets anywhere you deploy.
Why? I was tired of hand-crafting screenshots and badges for docs, dashboards, and social cards. I wanted something programmable, testable, and repeatable.
You can, for example, render such a component in your README.md:
What it does:
- Render React components to images (badges, charts, status tiles, OG images, etc.)
- Works in Node, browser, and serverless environments
- Pre-built components for common use cases (e.g., a
Baselinecomponent for tool compatibility) - Bring your own components + props
- Server-side rendering via Puppeteer for high-fidelity output (full CSS/JS, web fonts)
Example use cases:
- Compatibility badges (bun/npm/pnpm) in your README
- Auto-generated OG images for docs/blog posts
- Release notes tiles for Docs/X/LinkedIn
- KPI snapshots or charts for dashboards/reports
I've used, for example, Basely to render Node.js Support badge after all e2e tests passed.
How it’s different:
- Code is the source of truth
- API first
Status & ask:
It’s early, but usable for specific workflows. I’d love feedback on:
- If you'd like to use that
- Missing presets you’d want out of the box
- Video/animation needs (formats/durations/animation patterns)
Happy to answer questions and hear where this would (or wouldn’t) fit your pipeline.
- Demo & docs: https://basely.dev
- GitHub: https://github.com/livesession/basely
Top comments (0)