kazuyuki shimizu Posted on May 31 I don't want to write HTML or fight global CSS, so I built a TypeScript DSL # html # css # typescript TL;DR I got tired of writing HTML and chasing global CSS rules. I had a hunch: what if you could write a page the same way you write an app — same declarative tree, same modifier chains, scoped style per node? I spent a year quietly testing the bet on my own side projects. It... seems okay? I've open-sourced it as DraftOle ( npm / live demo ). page() writes plain static HTML + scoped CSS — zero runtime JavaScript shipped. app() adds reactive state() and event handlers — TypeScript arrow functions get serialized into a minimal runtime at build time. Same DSL, same modifiers, in both cases. No bundler, no JSX, no template language, zero production dependencies. pnpm add draft-ole # or npm install draft-ole # or yarn add draft-ole Enter fullscreen mode Exit fullscreen mode This is the 0.9.0 pre-1.0 release. The API surface is essentially settled and 1.0 is the next tag, but I'm intentionally holding back the 1.0 promise until I hear from real users. If you try it and it feels great or terrible, please tell me — both signals are useful. (Yes, AI can generate HTML/CSS now. I'm not making a claim about how DraftOle compares — that's a separate experiment I haven't run. This article is just about what I built and why.) ## Honestly? I just don't want to write HTML or global CSS anymore Let me be candid about the motivation. It's not a refined "type safety extends to the leaves" pitch. It's two embarrassingly small frustrations I kept hitting on every side project. 1. I don't want to write HTML I'm building logic in TypeScript — typed values, typed functions, typed data flow — and then at the last mile I have to drop into stringly-typed HTML. Attribute names are strings. Class names are strings. Five levels of nesting and I can't tell which element carries which style anymore. The logical layer is type-safe, and then the presentation lay
Back to Home

I don't want to write HTML or fight global CSS, so I built a TypeScript DSL
B
Blizine Admin
·2 min read·0 views
📰Dev.to — dev.to
B
Blizine Admin
View Profile Staff Writer