Settings

Theme

Show HN: Mirrow – TypeScript DSL for animated SVGs with compile-time checks

mirrow.app

3 points by era37 3 months ago · 2 comments · 1 min read

Reader

Mirrow is a small TypeScript DSL that compiles to SVG. It aims to make SVG and animation simpler without JSX or hand rolled CSS.

Highlights:

- Compile time checks and attribute validation - Inline events like on:click and @hover - CLI to turn .mirrow files into static SVGs or use as components

Quick try: npx mirrow -i example.mirrow -o example.svg

Playground: [https://mirrow.app/playground](https://mirrow.app/playground) GitHub: [https://github.com/MirrowApp/mirrow](https://github.com/MirrowApp/mirrow)

Feedback on DX, docs, and rough edges is very welcome. Thank you

seppuku 3 months ago

That is a really cool project, making SVG less of a pain to use. It looks much more readable and clean. The inline event feature with real time response shown on the playground is nice, good job!!

  • era37OP 3 months ago

    Thanks so much for the encouraging words; I hope any devs who try it out will fix the pain points I have when writing my own SVGs. The project resonates from a love for SVGs so I hope any developers with that same love would be happy to follow along!

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection