Code tools
- Style without a build step
- Visualize regex logic
Debuggex
An online tool that generates real-time railroad diagrams for your regular expressions to help understand their logic.
Debuggex - Find SVG icons
- Build games for free
- Start coding with AI agent
- Make websites readable
- Download 3D icons
- Transform data
- Authenticate 2FA
- Run global latency test
- Check browser version
- Customize websites
- Create an app
- Generate CSS only buttons
- Get loader css code
- Generate CSS only accordion sliders
- Convert color code
- Blend colors
- Generates color scales
- Text regex patterns
- Make JSON files readable
- Pick colors from any webpage
- Find icons for your web projects
- Edit code
- Run virtual machine
- Design or prototype
Maple
Style pages with utility classes - no build step, no configuration
A runtime CSS engine that generates atomic styles from the utility classes it finds on the page. Instead of shipping a compiled stylesheet, it ships a small script that watches the DOM and builds the CSS as elements appear. Add one script tag to any page and start styling.
What we love ❤️
- Open source under the Root Source License, a MIT-style permissions with one added distribution condition
- Works anywhere you can add a script tag - any framework, any backend, or plain HTML
- One ~14kb file no matter how large the project grows
- Styles are generated only for classes that actually appear, so there is no unused CSS
- No build step, no config file, no dependencies to install
- Server-rendered and static HTML need no special treatment
- Playground to try the syntax before committing to it
Worth noting 💡
- Requires JavaScript - it generates styles in the browser instead of shipping a stylesheet
- Loads as a blocking script in the head, the same way a stylesheet blocks rendering
- Generation work scales with the number of unique classes on the page, not the number of elements
Maple takes the opposite path from the usual CSS toolchain: rather than scanning source files and compiling a stylesheet ahead of time, it waits until a class shows up on the page and styles it then. The trade is a runtime dependency in exchange for having nothing to configure and nothing to purge. Worth a look if your styling setup has grown more complicated than the styling itself.