A customizable framework for building design tools.
Wavma lets designers that code create lightweight tools to design-in-place. Inspired by wonderful tools like Figma, Linear, and Slate, Wavma distills design tools into basic primitives that can be combined to give you just the features you need, right when you need them.
Editing the color of a visual in Wordpress, tweaking the font of a published vector graphic, or adjusting the path of an SVG icon in VS Code, Wavma meets you where you are to let you make design changes on the fly.
- Design Tooling - Relative to software engineering, design tooling is woefully underdeveloped. The typical workflow for visual creativity is to conceptualize an idea, open an Adobe product, iterate until you get management by-in, and then ship...oops the graphic looks off in production, red line the changes, now message the designer, etc.
- Standalone Features - Full-feature design tools like Photoshop, Sketch, Figma let you add custom functionality with plugins, but still require the entire runtime of the main app.
- Micro (Design) Services - Need to just edit an SVG path? Import the component. Building a font tool? Import the component. Need to edit colors? Import...you get the idea.
- Betting on the DOM - What's old is new: imperative programming. By ignoring an abstract syntax tree, Wavma utlizes the DOM as state and lets you drop-in any SVG and immediately start editing anything. It's slower for big files, but we're betting on the web and computers getting faster over time.
- Normalize Events - Drawing a rectangle on the web should work the same however you're doing it. For example you can draw a rectangle with SVG
rect(), or WebGL
- Useful exports - Need a transparent PNG, usable SVG, or just a simple JPG? Wavma focuses on output as a first-class feature.
- Zoom - Trackpad pinch-to-zoom, panning, keyboard shortcuts
- Position - Top, Left, Right, Center
- Shapes (Native SVG Elements) - Circle, Ellipse, Rectangle, Polygon, Polyline, Line
- Layers and Groups
- Pen Tool - Path
- Export - SVG, PNG, JPG
- Boolean Operations
- Chrome Plugin Font Explorer - A browser plugin that allows you try any font on the web with your vector design (exported from Figma, Illustrator, etc).
- DOM playground - A demo example of exploring what the DOM is capable of with a personal website that feels like a design tool.