Show HN: Mirrow – TypeScript DSL for animated SVGs with compile-time checks (opens in new tab)

(mirrow.app)

3 pointsera376mo ago2 comments

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

2 comments

seppuku6mo 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!!

era37OP6mo 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!

j / k navigate · click thread line to collapse