What is it?
What it is
A browser-first design editor for creating posters, layouts, social graphics, and canvas-based compositions with local-first editing and JSON export/import.
Why it exists
To provide a fast, desktop-optimized editor for designers needing browser-local scene manipulation, file persistence via IndexedDB, and modern export capabilities without requiring a backend for core workflows.
Who should use it
Web designers and developers looking for a browser‑first, open‑source canvas editor for posters, social graphics, and layout design; contributors interested in extending a TypeScript/React design tool; teams needing a local‑first editor with optional backend services.
Who should avoid it
Users requiring mobile editing support, those who need a fully server‑hosted solution out of the box, or developers unfamiliar with React, TypeScript, and modern frontend tooling.
How it works
A quick walkthrough in plain English
How avnac works
Step 1 of 3
You interact with it
Open avnac, send a request, or connect it to your stack.
Features
Advantages
- Local‑first architecture allows offline editing and autosave
- No external canvas runtime dependency simplifies bundling and reduces runtime overhead
- Fast, responsive editing experience in the browser
- Easy export to common image formats
- JSON import/export enables interoperability and version control
- Legacy file migration preserves user data
- Prompt‑driven editing streamlines workflow
- Modular, testable codebase with unit and regression tests
- Open‑source AGPL license encourages community contributions
- Backend optional for lightweight use cases
- Rich set of shape and transform features
- QR code generation adds value for marketing materials
Disadvantages
- Mobile editing intentionally blocked, limiting mobile users
- Backend is optional but required for remote media, Unsplash, and auth features
- No built‑in real‑time collaboration or multi‑user editing
- AGPL license may restrict commercial use without source release
- Browser‑only persistence limits cross‑device sync
- Large scene files may impact browser memory and performance
- Limited to TypeScript/React stack, may deter non‑JavaScript developers
Installation
FAQ
How do I start the Avnac frontend for local development?
Navigate to the frontend directory, run npm install then npm run dev. The app will be available at http://localhost:3300.
Where are my designs saved when I edit in Avnac?
Documents are autosaved to the browser's IndexedDB. The /files page reads from this local storage, and you can open a document via /create?id=... .
How can I import or export JSON files in Avnac?
From the files manager you can use the JSON import/export options. Import loads a JSON design into the editor, and export saves the current scene as a JSON file.
What happens if I open a legacy Avnac file?
Older files are detected and trigger a migration flow: a migrate-all prompt on the files page, a conversion modal when clicking an old file, or a blocking overlay if you open an old editor URL directly.
When is the backend required for Avnac?
The backend is optional for local editing but needed for media proxying of remote images, Unsplash search/download, and any server-backed document or auth features.
Featured in Videos
YouTube tutorials and walkthroughs for avnac
Alternatives
Similar projects ranked by category, topics, and text overlap.
