EXODEUI EDITOR MANUAL
Design & Vector Canvas
Precision Bézier vectors, procedural geometry, bone rigging, and design token styling all within a hardware-accelerated studio.
Interactive Geometry & Tangent Preview
Canvas & Workspace
Configure artboard dimensions, grid guides, and canvas rendering parameters.
Device Presets
Click on empty space to deselect all layers. In the right-hand Inspector, click the Preset dropdown to immediately configure standard mobile, tablet, and desktop display viewports:
Artboard, Background & Grid
Set custom Width and Height with pixel-level accuracy. Check Clip Content to hide elements overflowing the artboard boundary.
Select solid colors, subtle dark modes, or set Opacity to 0% to export transparent stickers and overlay widgets for web apps.
Press Cmd + ' to toggle the pixel grid. Smart guides automatically detect alignment and equal spacing between siblings.
Vector & Creation Tools
Build parametric shapes, draw organic curves, and sculpt scalable vector graphics.
Select Tool [V]
The primary pointer tool. Click any object to select, hold Shift to multi-select, and drag across the canvas for marquee selection. Double click to drill down directly into nested groups or vector paths.
Parametric Shapes
Draw rectangles with independent 4-corner radius controls.
| Property | Range | Behavior |
|---|---|---|
| Corner Radius | 0 - 500 px | Smooth squircle or rounded corner |
| Independent Radii | TL, TR, BR, BL | Custom per-corner curve radii |
| Rotation | 0° - 360° | Arbitrary angle rotation |
Draw circles, pie slices, and hollow donuts for dials and progress rings.
| Property | Range | Behavior |
|---|---|---|
| Slice Start / End | 0° - 360° | Creates open pie or arc segment |
| Inner Ratio | 0% - 100% | Turns solid circle into donut ring |
| Diameter | 1+ px | Uniform vector scaling |
Configure 3 to 20 sides in the Inspector. Adjust vertex roundness to create equilateral triangles, hexagons, or faceted badges.
Customize point count (3–50) and inner depth ratio. Perfect for rating badges, burst tags, and decorative starbursts.
Pen Tool [P] & Brush [B]
| Action | Resulting Node |
|---|---|
| Click | Cusp / Sharp Corner vertex |
| Click & Drag | Smooth Bézier curve with symmetric handles |
| Click Start Node | Closes path and enables fill layer |
| Alt + Drag Handle | Breaks handle symmetry for asymmetric curve |
Freehand drawing with real-time vector curve stabilization and pressure sensitivity.
| Setting | Range | Description |
|---|---|---|
| Smoothing | 0% - 100% | Simplifies raw mouse/stylus jitter |
| Stroke Weight | 1 - 200 px | Brush tip thickness |
| Brush Profile | Marker, Ink, Pen | Dynamic taper and caps |
Text Tool [T]
Press T and click anywhere on the canvas to place live typography. ExodeUI renders crisp vector glyphs that can be styled, animated along paths, or dynamically bound to runtime state variables.
Skeletal Bones & Rigging
Build joint hierarchies and inverse kinematics for organic characters and mechanical interfaces.
Bone Tool [N]
Create multi-segment bone hierarchies that deform artwork smoothly. Select the Bone Tool, click to position root joints, and click sequentially to form linked chains.
| Bone Parameter | Range | Purpose |
|---|---|---|
| Length | 1+ px | Distance between joint centers |
| Relative Angle | -180° to 180° | Local rotation relative to parent bone |
| Inherit Scale | Boolean | Whether child scales proportionally with root |
| Joint Stiffness | 0% - 100% | Resistance to angular deformation |
Inverse Kinematics (IK)
Parenting Layers to Bones
In the Layers Panel, drag any vector shape or group directly over a Bone. The artwork is bound to that bone's coordinate space, transforming seamlessly with every movement.
Object Actions & Hierarchy
Group, align, boolean merge, and organize artwork.
Selection & Duplication
Smart Duplicate
Group Layers
Ungroup
Lock / Unlock
Boolean Operations
Select two or more overlapping shapes to combine them non-destructively:
Merges shapes into one unified silhouette
Cuts top shape out of bottom base
Preserves only overlapping geometry
Removes overlapping area, keeps perimeter
Styling, Gradients & Effects
Mesh fills, multi-stop gradients, glassmorphism, and blend modes.
Fills & Multi-Stop Gradients
Hex, RGB, and HSL color picker with alpha channel support and reusable brand palette swatches.
Add unlimited color stops, drag on-canvas direction vectors, and adjust color interpolation curves.
Embed high-resolution PNG, JPG, or WebP bitmap assets into vector masks with fit / fill scaling modes.
Strokes, Dashes & Caps
| Stroke Property | Options | Design Impact |
|---|---|---|
| Alignment | Inside, Center, Outside | Position relative to vector boundary |
| Cap Style | Butt, Round, Square | End point terminal styling |
| Join Style | Miter, Round, Bevel | Corner vertex behavior |
| Dash Pattern | e.g., [8, 4] | Dashed / dotted lines, animated with Dash Offset |
Blurs, Shadows & Frosted Glass
Applies real-time Gaussian backdrop filtration behind the element. Combine with a 15% white fill and 1px white stroke to create modern glassmorphism panels.
Configure X/Y offsets, blur radius, and spread. Multiple stacked shadow layers allow realistic diffusion and dimensional elevation.
Typography & Dynamic Binding
Typography tokens and runtime data variables.
Font Styling & Tracking
| Property | Values | Description |
|---|---|---|
| Font Family | System, Google Fonts, Custom TTF/WOFF2 | Typeface selection |
| Font Weight | 100 (Thin) to 900 (Black) | Variable font axis support |
| Letter Spacing | -5% to +20% | Tracking between glyphs |
| Line Height | 0.8 to 2.5 | Vertical line spacing |
| Align to Path | Select vector path | Warps typography organically along any curve |
Binding Text to Logic Variables
Convert static labels into reactive runtime UI (such as live account balances, user greetings, or dynamic counters):
// In React App — dynamically update text bound to logic variable "user_score"
const { setInputText } = useExodeUI();
// Update when backend API data changes
setInputText('user_score', '98,420 XP');