# Avnac browser design editor: local files, canvas editing, and export

> Avnac is a desktop-first, browser-based editor for posters, layouts, social graphics, and other canvas compositions. Its strongest fit is local, browser-centered work, while server-backed documents, remote media handling, and mobile use remain constrained.

**xt42io/avnac** — Free browser-based design software.

- Repository: https://github.com/xt42io/avnac
- Website: https://avnac.design
- Stars: 1,595 · Forks: 202
- Language: TypeScript
- License: AGPL-3.0
- Published: 2026-10-16 · Updated: 2026-10-16 · Language: en
- Canonical page: https://hysenlabs.com/projects/xt42io-avnac

## Avnac targets local-first canvas composition

Avnac addresses a specific gap between hosted design suites and local creative tools. It is aimed at people producing posters, layouts, social graphics, and other fixed-canvas compositions in a browser rather than through a conventional desktop application. The project supports custom or preset canvas sizes, text, basic shapes, lines, arrows, images, and vector boards. It also includes QR code generation and a Magic panel for prompt-driven editing.

The product is local-first, which has concrete advantages and equally concrete boundaries. Documents autosave in the browser, and the `/files` page reads them from IndexedDB. This makes the core editing workflow available without requiring persistence through the included backend. JSON import and export provide a path for moving documents through the files workflow. However, the README does not document synchronization across browsers, collaboration, conflict resolution, or a server backup system. Browser-local persistence should therefore be treated as the primary storage model, not as evidence of a cloud document platform.

Avnac also has a deliberate product boundary around device support. The editing experience is desktop-first, while mobile editing is intentionally blocked. This is not a responsive mobile editor. Its selection handles, panels, transform overlays, and canvas controls are directed at desktop browsers, so adopting it for phone-based authoring would contradict the current product state.

## Avnac scene model and rendering path

The frontend is a React, Vite, and TypeScript application using TanStack Router, Tailwind CSS, and a small Zustand-backed editor store. According to the README, Avnac no longer relies on an external canvas editing runtime for scene manipulation. Instead, scene data is defined in `frontend/src/lib/avnac-scene.ts`, while rendering and export behavior is separated into `frontend/src/lib/avnac-scene-render.ts`.

Lower-level operations are organized under `frontend/src/scene-engine/primitives`. The repository description identifies geometry, snapping, object transforms, and file placement as responsibilities in that area. The editor interface itself is divided into modules beneath `frontend/src/components/scene-editor`. This separation gives developers clear places to inspect when a selection bug, snapping change, resize issue, or rendering problem needs attention.

The documented editing model includes selection, multi-select, marquee selection, grouping and ungrouping, reordering, alignment, resizing, rotation, cropping, radius, blur, opacity, shadows, and background changes. It also supports snapping, transform overlays, and nested drawing areas created by vector boards. These features indicate a scene graph with multiple object types rather than a simple fixed-template editor.

Export is part of the same frontend-centric workflow. Avnac can produce `PNG`, `JPG`, and `WebP` images, while JSON serves as its document interchange format. Remote images introduce a separate dependency. The backend can proxy media for export-safe handling, but changing media proxy behavior requires restarting the backend before export testing. That boundary matters because local editing and remote asset export do not have identical infrastructure requirements.

## Running Avnac locally for the first time

For a first frontend run, follow the frontend instructions in the README. This starts the editor development server on the documented local address. The backend is not required for basic scene editing, local files, migration behavior, or export development unless the workflow uses remote media, Unsplash, documents, or auth routes.

```bash
cd frontend
npm install
npm run dev
```

The frontend should be available at `http://localhost:3300`. The README identifies `/create` as the editor route, `/files` as the browser-local file manager, and `/` as the landing page. Since desktop editing is intentional, the first usable workflow should be opened in a desktop browser.

The frontend also provides scripts for building, previewing, and testing. The documented commands are:

```bash
cd frontend
npm run dev
npm run build
npm run preview
npm test
```

For a backend run, copy the example environment file before starting the service. The README states that this service listens on `http://localhost:3001`.

```bash
cd backend
npm install
cp .env.example .env
npm run dev
```

The backend's documented type and lint check is:

```bash
cd backend
npm run check
```

The repository root also exposes `lint`, `lint:fix`, `format`, and `format:check` through the root `package.json`. The README does not give a single root command for installing both workspaces, so the documented frontend and backend sequences should be followed separately.

## Hugeicons setup changes only the frontend icon set

Avnac does not require a paid icon package to run. Without `HUGEICONS_NPM_TOKEN`, contributors install only the free icon packages and the frontend falls back to free sidebar icons. This is a narrow optional setup rather than a prerequisite for compilation.

For a licensed local install, the README places the token export before `npm install`. The token is consumed at install or build time and must not use a `VITE_` prefix.

```bash
cd frontend
export HUGEICONS_NPM_TOKEN=your_token_here
npm install
```

Production and CI builds are documented as able to proceed without the token. In that case, the frontend uses the free fallback icons. This is useful for forks and automated builds because icon licensing is separated from access to the editor itself. It also means that a missing token should affect icon selection, not whether the project has a documented frontend build path.

## IndexedDB files and legacy migration constraints

Avnac's file model offers convenience but makes browser data management important. Documents autosave in IndexedDB, the files page presents stored documents, and the editor opens one through `/create?id=...`. JSON import and export are available, but the README does not document a hosted recovery service or cross-browser replication. It also does not state whether deleting browser site data can be recovered through Avnac. The documented safeguard is file export.

Legacy compatibility is handled more explicitly. Avnac detects older saved files and offers migration through several entry points. The files page can present a migrate-all prompt when old files are present. Clicking an old file opens a conversion modal. If someone opens or refreshes an old editor URL directly, a blocking conversion overlay appears before editing continues. These are concrete compatibility mechanisms rather than a claim that every legacy format will always open without intervention.

The README identifies `frontend/src/lib/avnac-scene.ts` and the files and create routes as the first places to inspect for old-file problems. Frontend regression tests reportedly cover parsing and migration detection, along with snapping, image and object resizing, vector-board rendering, and file placement helpers. The repository has no published GitHub releases, so users should not assume a formal release channel defines the supported migration path.

## Optional backend routes versus browser-only work

The backend uses Elysia and TypeScript. It is optional for many day-to-day editor tasks, which is the main architectural distinction between Avnac and a design service whose server is required for ordinary document use. Its documented route areas cover `backend/src/routes/media.ts`, `backend/src/routes/unsplash.ts`, and `backend/src/routes/documents.ts`, while authentication wiring is located under `backend/src/plugins` and database setup under `backend/src/db`.

Media proxying is relevant when an export includes remote images. Unsplash routes support search and download flows. Document and auth-related server routes also exist, although the README does not fully describe their authentication requirements, deployment model, or collaboration semantics. As a result, the existence of those routes should not be presented as proof of a complete multi-user service.

A direct alternative is a hosted design suite with server-backed documents and built-in sharing. Its approach places canonical files and collaboration state on the provider's infrastructure, whereas Avnac's documented primary state is IndexedDB in the user's browser. Another alternative is a local desktop design application, which changes the storage boundary from browser-managed data to files managed by the operating system. Avnac's advantage is its browser-first scene editor; the trade-off is that local persistence, remote media behavior, and device support must be evaluated explicitly.

## Maintenance, licensing, and upgrade work

The repository is not archived. Its last push was on 2026-05-11, and the repository has no GitHub releases. Those facts establish recent code activity but do not provide a tagged upgrade path or a documented release cadence. The absence of releases also means that adoption planning cannot rely on a published upgrade sequence from the README.

The project is licensed under `AGPL-3.0-only`. That identifier matters for organizations considering source modifications, network deployment, or derivative work. This article does not provide legal advice or interpret the license's obligations, but the license file and `AGPL-3.0-only` package metadata should be reviewed by the responsible parties before deployment or modification.

The repository includes frontend regression tests and separate frontend and backend checks, but the README does not document a complete release checklist. A change affecting scene parsing can interact with migration and export, while a media proxy change can affect remote export flows. The documented restart requirement for backend media changes is a small but concrete maintenance consideration: developers testing export behavior must ensure the backend reflects their edits.

## Conclusion

Avnac suits creators who want a desktop-first canvas editor with browser-local storage and direct scene controls. It is a poor fit for mobile editing, teams that require shared server-backed documents by default, or users who need a documented release and migration policy. Before adoption, verify that autosaved IndexedDB files fit the intended browser and device workflow, then test remote image export if the optional backend will be used.

## FAQ

### How do I install and run Avnac locally?

Run `npm install` and `npm run dev` inside `frontend` for the primary editor development server. A separate backend setup is available inside `backend`, but it is not required for all local editing workflows.

### Does Avnac work on mobile?

No. The README states that Avnac is desktop-first and that mobile editing is intentionally blocked.

### Where are Avnac files saved, and which formats can I export?

Documents autosave in the browser and the files page reads them from IndexedDB. Avnac supports JSON import and export, plus image export in `PNG`, `JPG`, and `WebP` formats.

### Is a Hugeicons Pro license required to build Avnac?

No. The frontend works with free icon packages and uses fallback sidebar icons when `HUGEICONS_NPM_TOKEN` is not provided.

### What happens when I open an older Avnac document?

Avnac detects legacy files and presents migration or conversion prompts before editing. The files page includes a migrate-all option, while direct access to an old editor URL opens a blocking conversion overlay.

## Sources

- [Issues](https://github.com/xt42io/avnac/issues)
- [License: AGPL-3.0](https://github.com/xt42io/avnac/blob/main/LICENSE)
- [Project website](https://avnac.design)
- [README](https://github.com/xt42io/avnac/blob/main/README.md)
- [xt42io/avnac on GitHub](https://github.com/xt42io/avnac)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/xt42io-avnac