Alternatives

Products that do what I built a declarative layout engine for SVG, Canvas, WebGL does

Hey HN, I built a tiny zero DOM layout engine for vector graphics and custom renderers to resolves nested rows/cols/grids into exact `{x, y, w, h}` boxes, with text measurement, overflow signals, and collision separation. This is to help make SVG, PDF, Canvas responsive. Feedback welcome from anyone building canvas/SVG diagrams, dashboards, node editors, or diagram tools.

1. 1AT
   A tool to build real websites built exclusively in SVG▲197

   2021 · svija.love

2. 2RJ
   Rune.js – Graphic design systems with SVG in the browser or Node.js▲92

   2015 · runemadsen.github.io

3. 3MV
   Moqups - Vectorial mockups with HTML5 and SVG▲310

   2012 · moqups.com

4. 4
   SVG Background Generator▲296

   Customize, scalable backgrounds and patterns for free

   2018

5. 5TB
   Tailwind Builder – online editor for the Tailwind CSS framework▲295

   2019 · tailwind.build

6. 6MG
   Magic Grid – A simple JavaScript library for dynamic grid layouts▲167

   2018 · github.com

7. 7GJ
   GoldenLayout – JavaScript Layout Manager▲211

   2014 · golden-layout.com

8. 8
   Grid Layout Builder by Webflow▲194

   A completely visual way to build CSS grid–powered layouts

   2018

9. 9
   Vector Pattern Generator▲185

   Customize seamless patterns for the web

   2021

10. 10TR
    Tailwind.run – An Online Playground for Tailwind CSS▲181

    2019 · tailwind.run

11. 11ST
    SVG Triangulation for WebGL▲94

    2015 · mattdesl.github.io

12. 12VI
    Vecta.io - Team diagramming with an advanced SVG editor▲154

    2017 · vecta.io

13. 13AS
    A simple lightweight CSS grid, not a bloated framework▲134

    2012 · thisisdallas.github.com

14. 14GN
    GraphicsJS, New Powerful Free Open-Source JavaScript Graphics Library▲124

    2016 · graphicsjs.org

15. 15
    Walkway.js▲121

    An easy way to animate simple SVG elements

    2014

16. 16GO
    GrapesJS – Open source tool for building templates easily▲74

    2016 · grapesjs.com

17. 17CG
    CSS Grid Playground in Webflow▲65

    2018 · webflow.com

18. 18FT
    Flowbite – Tailwind CSS Components Library▲77

    2021 · flowbite.com

19. 19WP
    Weekend project - a WebGL Orrery▲17

    This was my recent weekend project, aimed at teaching me JavaScript, a bit of HTML5, and (mostly) WebGL. The orbital data are from NASA JPL. I was inspired in part by this Flash app: http://www.dynamicdiagrams.com/wp-content/uploads/2011/04/orrery_2011_bce.swf, but wanted to do something in 3D. Coming from the games-dev world, this is my first introduction to web coding. The UI is jquery. I mostly used http://learningwebgl.com/blog for the 3D stuff. Being WebGL, it will work mostly on Chrome, Firefox 4 Beta. Forget about IE. I needed to figure out how to render text to the WebGL canvas - I…

    2011 · solar-system-explorer.com

20. 20OE
    Online editor to create animated SVG▲66

    2021 · bestsnip.com

21. 21SS
    SVG Shape Generator – Create organic-looking shapes for your designs▲52

    2021 · softr.io

22. 22LE
    Live-Editable SVG Shaders/Filters for Drawing▲48

    2022 · sketchy.cs.brown.edu

23. 23DJ
    Drul.js – A simple library to create HTML grid layouts▲5

    2017 · github.com

24. 24CA
    Coördinator, a visual interface for turning an SVG into XY coördinates▲30

    2018 · spotify.github.io

Ranked by how close each launch is in meaning, then by votes. Refine with a description →