Design architecture using code and visually simulate it in browser
Hey HN, I have been working on this for a few months and recently open sourced my work. It’s a code playground where you can write TypeScript based code and the bundled runtime will execute it visually. Here are some examples that you can try right away: Hello world https://app.metz.sh/template/2 Average stock price(Event based system) https://app.metz.sh/template/7 A polling setup(Shows parallel flows) https://app.metz.sh/template/4 There are more on the readme https://github.com/metz-sh/simulacrum#examples I…
What it does
In the maker’s words, at launch
Hey HN, I have been working on this for a few months and recently open sourced my work. It’s a code playground where you can write TypeScript based code and the bundled runtime will execute it visually. Here are some examples that you can try right away: Hello world https://app.metz.sh/template/2 Average stock price(Event based system) https://app.metz.sh/template/7 A polling setup(Shows parallel flows) https://app.metz.sh/template/4 There are more on the readme https://github.com/metz-sh/simulacrum#examples I have been building software for ~8 years now but till this day I feel limited on how I can express my design. Boxes and lines just don’t do the job when complexity passes a threshold. I thought I would have luck with mermaid, but it’s just a codified way of creating boxes. But with metz, I want to build a figma like experience. Like how designers use the tools that make most sense, create a design which democratises their idea and invites a health discourse. I as an engineer want to simply write the code for my design & get a figma like prototype which I can share with my Architect and PM and get it reviewed asynchronously. I believe code is the best thing to do this as it’s such a reliable and easy way to express complexity. Unlike other code-to-diagrams tool, metz code doesn’t talk about where to place a box. You simply code to solve a design problem. I have been scared to submit this for a while because I couldn’t find a single tool which leaned in this direction & I thought I was building something wrong. But I would love to know your thoughts and receive critique!
Does the same job
all alternatives →
- TTT3 – Template to build Three.js applications2014 · maurizzzio.github.io · ▲48
- AMArchitectural Metapatterns Book [pdf]2024 · github.com · ▲7
I wrote a free book (CC BY license) on software architecture. It classifies architectural patterns / system designs into groups according to their structure, so that each group features a specific set of goals and properties, as structure and function correlate. That results in a kind of inheritance for patterns, making it easy to learn them and even iterate over all the known architectures to analyze their properties. Any feedback and ideas on how to promote the book is warmly welcome!
More dev tools this month
the category →
Open-source GTM skills for technical founders
Dev tools · 29d ago · gtmcofounder.com
OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.
Dev tools · 1d ago · opentrailpaper.com
Launched alongside, August 2024
the whole month →
- IY
Life & fun · 2024 · ytch.xyz
- IA
Hey there HN! We’re Joe and Stopa, and today we’re open sourcing InstantDB, a client-side database that makes it easy to build real-time and collaborative apps like Notion and Figma. Building modern apps these days involves a lot of schleps. For a basic CRUD app you need to spin up servers, wire up endpoints, integrate auth, add permissions, and then marshal data from the backend to the frontend and back again. If you want to deliver a buttery smooth user experience, you’ll need to add optimistic updates and rollbacks. We do these steps over and over for every feature we build, which can…
Dev tools · 2024 · github.com