top | item 45346146

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

3 points| era37 | 5 months ago |mirrow.app

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

order

seppuku|5 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!!

era37|5 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!