nowfound

Dev tools · March 21, 2024

Dropflow, a CSS layout engine for node or <canvas>

For the last 5 years I've been working on a layout engine that targets CSS2 and some more modern properties. Live demo: https:&#x2F;&#x2F;chearon.github.io&#x2F;dropflow&#x2F; It matches browsers in all cases I can find where they agree, and it's fast. It supports `position`, `inline-block`, `z-index`, and complex properties like `float` and `vertical-align`. It doesn't support high-level layout like flexbox or grid yet, but you can get intrinsics to easily divide space yourself and paint multiple layout trees. It has a great text layout implementation, and supporting non-Latin scripts is a…

Dropflow, a CSS layout engine for node or <canvas> launched on March 21, 2024 with 404 votes, #58 of 4,270 launches that month and more than 99% of that year's launches. The site was still online in September 2026, 2 years on.

Visit github.com ↗Alternativestop 1% of March 2024

In plain words

Dropflow is a CSS layout engine that runs on Node.js or canvas, implementing CSS2 properties and select modern features. It handles positioning, inline-block display, z-index, floats, and vertical-align, with particularly strong text layout support including non-Latin scripts. The engine prioritizes accuracy, matching browser behavior across test cases, and performance. It does not yet support flexbox or grid but provides intrinsics for custom space division and multi-tree layout. It is designed for server-side rich text rendering and canvas-based applications.

written from the facts on this page · September 2026

From the sources

A CSS layout engine. Contribute to chearon/dropflow development by creating an account on GitHub.

In the maker’s words, at launch

For the last 5 years I've been working on a layout engine that targets CSS2 and some more modern properties. Live demo: https:&#x2F;&#x2F;chearon.github.io&#x2F;dropflow&#x2F; It matches browsers in all cases I can find where they agree, and it's fast. It supports `position`, `inline-block`, `z-index`, and complex…

Does a similar job

all alternatives →
  • Puck 0.18 adds drag-and-drop for CSS grid and Flexbox2025 · github.com · ▲51

    Hey HN! I just released Puck 0.18 with a new drag-and-drop engine for CSS grid and flexbox support. You can now use Puck to create a page builder that behaves like a design tool, but embedded within your own app and using your own React components. To use it, just add `display: flex` (or grid, etc) to your DropZone and Puck will gracefully handle drag-and-drop across all dimensions. Shout out to the dnd-kit maintainer Claudéric for the collaboration and support (if you’re reading this, I just sponsored you on GitHub!) and as always, a huge thanks to my wonderful community for all the testing…

  • WD
    Webflow - Design responsive websites visually2013 · playground.webflow.com · ▲503
  • Webflow Flexbox UI Builder2016 · flexbox.webflow.com · ▲444

    Build flexible, responsive layouts - without writing code

  • Grid Layout Builder by Webflow2018 · ▲194

    A completely visual way to build CSS grid–powered layouts

  • Webflow 3D Transforms2015 · 3d-transforms.webflow.com · ▲318

    Build 3D interactions visually, without writing any code

  • Flowbite 2.02022 · flowbite.com · ▲336

    Open-source ecosystem built on top of Tailwind CSS

More dev tools this month

the category →
  • /dev/null▲482

    a social network for devs

    Dev tools · 2d ago · dev-null.sh

  • open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

    Dev tools · 27d ago · github.com

  • Contribute to reladraw/reladraw development by creating an account on GitHub.

    Dev tools · 25d ago · github.com

  • OpenBot▲362

    Grok Bot alternative: free, local, open-source, multiplayer

    Dev tools · 22d ago · openbot.run

  • Talanoa▲343

    Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

    Dev tools · 20d ago · talanoa.email

  • CoreSpeed▲332

    One MCP for everything your agents need: apps, memory, tools

    Dev tools · 28d ago · corespeed.io

Source: Show HN post ↗ · launch text quoted in part

Launched alongside, March 2024

the whole month →
  • Dub.co▲1,475

    Short links with superpowers

    Dev tools · 2024 · dub.co

  • 🌐 The Internet Computer! Free, Open-Source, and Self-Hostable. - HeyPuter/puter

    Dev tools · 2024 · github.com

  • Microlaunch▲1,115

    Launch and get feedback on both the idea and product

    Dev tools · 2024 · microlaunch.net

  • Milestone▲1,113

    Interactive, gamified product tours for SaaS

    Growth · 2024 · milestoneflow.io

  • Hunted Space▲1,004

    Insights on Product Hunt launches

    Growth · 2024 · hunted.space

  • Creatie▲850

    The one-stop product design tool amplified by AI

    AI · 2024 · creatie.ai