Web tools
- Style without a build step
- Edit photos and generate art
- 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
- Learn Japanese
- Build games for free
- Visualize tattoo ideas
- Share files securely
- Bookmark links, notes and images
- Connect your notes
- Listen to forests
- Watch news channels online
- Download 3D icons
- Learn music theory
Learning Music
Interactive music theory and composition learning through hands-on exercises
Learning Music - Transform data
- Listen radio stations
Radio Garden
Explore and listen to live radio stations from thousands of locations worldwide
Radio Garden
- Share files
- Run global latency test
- Check browser version
- Process PDF files
- Edit PDF files
- Create an app
- Share files
- Generate CSS only buttons
- Compress images
- Get loader css code
- Generate CSS only accordion sliders
- Convert color code
- Blend colors
- Generates color scales
- Get information about any emoji
- Download brand logos
- Compress images
- Text regex patterns
- Create duotone images
- Remove background from images
- Edit audio
- Find icons for your web projects
- Design or prototype
- Create diagrams
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.