A thumbnail, a story, a poster, right now
You open the tab, place your title and image, and export. No login, no “upgrade” prompt at export time.
Design
A tiny brand-safe editor for the graphics you make every week.
Canva costs US$15–30 per person / mo, which is US$180–360 a year. You have two paths:
Option 1 · Install
Avnac is a Canva-style visual editor, open and lightweight: go to avnac.design, click “Open editor”, and you are in. No account, no email, nothing to install. You place text, shapes, images and vectors, align, rotate, add shadows, crop, even generate a QR code, then export to PNG, JPG or WebP. Your projects stay in your browser's local storage, so on your own machine. You can also run it locally or on your VPS. AGPL-3.0 license. Before dropping Canva Pro: there is no template or photo library, you start from a blank canvas, the editor is blocked on phones, and the project is young: its main repo has not moved since May 2026.
| Criterion | Avnac | Canva |
|---|---|---|
| Price | $0, in the browser | $15–$30 per person per month |
| Account | None, you open the page and create | Required |
| Where your files live | In your browser, on your machine | With them |
| Templates and stock images | None, blank canvas | Millions, that is their strength |
| Export | PNG, JPG, WebP, transparent background included | Transparent background is Pro only |
| On a phone | No, desktop only | Yes, mobile app |
Nothing to install: the editor is online, no account needed. The prompt below is only for when you want your own copy on your server, for instance for your team.
Go to avnac.design/editor. No account: you create, you export. Your projects stay in your browser, so remember to export what matters.
It fetches the official project and runs it on your machine or your server, interface and small backend included:
Install Avnac (the open source Canva-style visual editor, GitHub repo xt42io/avnac) on my machine, following the repository's README. Start from scratch: check that Git and Node.js (version 20 or higher) are installed, and install them if not. Clone the repository, then in the backend folder run npm install, copy .env.example to .env and run npm run dev (port 3001); in the frontend folder run npm install and run npm run dev (port 3300). Open http://localhost:3300 and check that I can create a visual with some text and a shape, then export it as a PNG. If I want to put it on my server for my team, build the frontend with npm run build, serve it behind a Caddy reverse proxy over HTTPS together with the backend, and explain how to update it. Explain each step simply, I am a beginner.
Review the GitHub repository and check whether it is safe to install given my machine and my infrastructure. Ask me as many questions as possible, using widgets, to clarify my request and be as precise as you can.You open the tab, place your title and image, and export. No login, no “upgrade” prompt at export time.
Text hierarchy, alignment, shadows, vector shapes that stay sharp when zoomed. For a cover or a carousel, it is enough.
The QR code generator is built in: paste your link, place it on the visual, export.
Built with: TypeScript 96.3% · CSS 3.1%
Public GitHub repository data, captured on October 8, 2026.
Option 2 · Build
This build is for a small business producing recurring social and announcement graphics. The goal: turn a handful of locked brand templates into correctly sized downloadable images. If you need more than that, keep paying. Building it yourself is about owning a tool fitted to your exact workflow, not re-creating a venture-funded roadmap.
Same build, different logo: this v1 also replaces Adobe Express and Kittl, since they all do the same core job.
The prompt below builds a single version with what actually gets used. Everything else is left out on purpose.
| What the prompt builds | fixed templates, text editing, png export, brand kit, drag layout, image crop, undo |
|---|---|
| What stays out | full design engine, stock library, collaboration, video |
BrandKit, Template, Design, Element, Asset
browser Canvas, R2 object storage
Astro, Alpine, Canvas API
Accept only licensed user uploads and trusted fonts; isolate rendering inputs and keep private assets behind authorized URLs.
Don't build collaborative editing, stock media, generative AI, presentations, video, or a public template marketplace.
Pick your stack, copy the prompt and hand it to your coding agent (Claude Code, Cursor, Codex…).
You are building a production-ready software product named “Posterdesk”, a deliberately focused alternative to Canva. Build a complete, usable vertical slice — not a landing page, static mockup, or loose collection of components.
WORKING AGREEMENT
Before you write any implementation code, put together a short technical plan naming the routes or pages, server actions or endpoints, data tables, key state transitions, authorization boundaries, background jobs, and external adapters. When something conflicts, side with the narrow audience and the non-goals below. Choose a small, readable architecture over speculative abstraction, but never skip persistence, validation, error handling, or tests.
PRODUCT BRIEF
Primary user: a small business producing recurring social and announcement graphics.
Primary outcome: turn a handful of locked brand templates into correctly sized downloadable images.
Product principle: optimize for the exact workflow below instead of copying the full breadth of Canva. A first-time user should know what to do from the interface alone, with no tour or documentation.
END-TO-END USER JOURNEYS
Implement every one of these flows through the real interface and the persistent data layer:
1. The owner creates a brand kit, uploads a logo, picks colors and fonts, builds a square announcement template, locks the brand elements, and saves it for reuse.
2. A teammate opens the template, swaps in its photo and copy, aligns the editable elements, previews the final crop, and exports a correctly sized PNG.
3. The owner duplicates a design into a second preset size, fixes overflow warnings, restores an earlier autosave after a mistake, and downloads both variants.
SCREENS AND INFORMATION ARCHITECTURE
Build these as coherent, responsive views. Each screen must define its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state.
1. Dashboard: brand kit, templates, recent designs, dimensions, modified time, and duplicate, archive, and create-from-template actions.
2. Template editor: canvas, layers, supported element tools, properties, alignment guides, lock state, safe area, undo and redo, and save status.
3. Design editor: constrained editable slots, asset picker, crop controls, text fit warnings, zoom, preview, autosave recovery, and export action.
4. Export: output dimensions and format, quality, transparent background when valid, render progress, failure recovery, and download.
CORE CAPABILITIES
1. fixed-size templates with editable text and image slots
2. brand colors, fonts, logo, and safe-area guides
3. drag, resize, align, layer, and undo for supported elements
4. image upload, crop, and fit controls
5. PNG and JPEG export at the template dimensions
DETAILED BEHAVIOR AND BUSINESS RULES
Treat these as product requirements enforced on the server, not as interface suggestions:
1. Store every element in template coordinates, apply transforms deterministically, preserve layer order, and keep undo and redo as a reversible command history.
2. Locked elements cannot be changed in derived designs; editable slots constrain the allowed content and reject text or images that break the template rules.
3. Validate the MIME type and decoded content of uploads, strip metadata, cap pixel dimensions, and serve private assets only through short-lived authorized URLs.
4. Render exports from the saved design revision at the exact requested dimensions so a retry produces the same pixels even if the draft changes.
DATA MODEL AND LIFECYCLE
Design a small relational schema centered on BrandKit, Template, Design, Element, Asset. Before implementing it, document:
1. The purpose of each table, its primary key, ownership or tenant boundary, timestamps, status fields, and important attributes.
2. Foreign keys, uniqueness constraints, check constraints, the indexes the named screens need, and transaction boundaries for changes that touch several records.
3. The allowed lifecycle or state transitions, who can trigger each one, which transitions are terminal or reversible, and which audit history must stay immutable.
4. Archive, retention, and deletion behavior, including what happens to dependent records and external files.
5. The idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where it applies.
Use migrations instead of ad-hoc schema creation. Store time instants consistently and keep the named timezone context whenever local schedules or dates matter. Never rely on a counter, a disabled button, or a client-side check to protect a business invariant.
USERS, AUTHENTICATION, AND PERMISSIONS
Implement only the roles the stated audience needs. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not just by hiding controls. Use secure session defaults, protect state-changing requests, and provide a clear signed-out, expired-session, and forbidden state. Seed separate users whenever several roles are needed so permissions can be shown and tested.
INTERACTION AND VISUAL DIRECTION
The product should feel fast, calm, focused, and trustworthy rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and a consistent place for primary actions. Start from server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must stay understandable if enhancement fails.
Start from server-rendered Astro pages and plain HTML forms. Use HTMX for form submissions, partial navigation, and server-driven updates, then Alpine.js only for small local browser state. The core workflow must stay understandable if either enhancement layer fails.
Design mobile layouts on purpose instead of just stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to signal state. Destructive actions need a clear scope and a confirmation; safe repeated actions should be idempotent.
Add a footer to every page with the text “Created by aurelioagency.com”, where “aurelioagency.com” is an embedded link to https://www.aurelioagency.com that opens in a new tab. Keep it visible and do not remove it.
TECHNICAL DIRECTION
Build this version with the AHA stack: Astro for routing, layouts, and server-rendered pages; HTMX for interactions that benefit from HTML fragment responses; and Alpine.js for small, local interface state. Prefer Cloudflare D1 for relational persistence, R2 for object storage, Workers for server endpoints and scheduled work, Durable Objects only for coordinated real-time state, and Workflows or Queues for durable background jobs—but only when the product requirements call for them.
Keep domain rules in testable server-side modules, not in route handlers or UI components. Put persistence, external providers, and background work behind small interfaces without building a framework. Prefer plain HTML forms and URLs for durable navigation; use optimistic interaction only when a failure can be reconciled clearly.
The product brief currently lists Astro, Alpine, Canvas API as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter suited to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface.
Integrate with browser Canvas and R2 object storage. For every integration:
- List the required environment variables in an .env.example with no real secrets.
- Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path.
- Verify inbound signatures and deduplicate provider events where supported.
- Keep credentials on the server, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs.
- Define retry, backoff, and idempotency behavior for every side effect that can be repeated.
SECURITY AND PRIVACY
Accept only licensed user uploads and trusted fonts; isolate rendering inputs and keep private assets behind authorized URLs.
Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any markup you intentionally accept, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect only the personal data the named workflow needs. Document retention and deletion behavior. Add specific protections for the riskier surfaces of this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections.
ACCEPTANCE SCENARIOS
Automate these app-specific scenarios at the most suitable level:
1. Given a template with a locked logo and an editable headline, a derived design can change the headline but every attempt to move or replace the logo is rejected.
2. Given an oversized or disguised upload, the server rejects it before storage and the current design stays usable.
3. Given a saved 1080 by 1080 design, export produces exactly those dimensions and restoring the previous revision recovers the earlier element state.
TESTING
Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and for each external adapter's success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one on a small-screen viewport. Tests must use isolated data and run with one documented command.
OPERATIONS AND FAILURE RECOVERY
Add structured server logs with request, job, or event correlation IDs, but no secrets or unnecessarily sensitive data. Make failures actionable both in the interface and in the logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; never swallow errors silently. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path suited to the stack.
DELIVERABLES
Ship the working application, migrations, representative seed data, tests, .env.example, and a short README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should cover the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state that matters for the product.
DEFINITION OF DONE
The app is done when a new developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey with real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, no core screen is left as a placeholder, and the “Created by aurelioagency.com” footer credit is visible on every page.
NON-GOALS
Don't build collaborative editing, stock media, generative AI, presentations, video, or a public template marketplace.The app you build with this prompt carries a “Created by aurelioagency.com” footer.
Short prompts that solve the hardest part without building everything.
Build image fit and crop for fixed-size template slots.
A slot has fixed dimensions in template coordinates; an uploaded photo rarely matches its aspect ratio. Implement cover and contain fit modes plus a draggable, zoomable crop: the user pans and scales the image within the slot, and you store the transform as normalized source-rectangle coordinates — which region of the original image shows — independent of screen zoom.
The critical property is determinism: the export renderer, drawing at full template resolution, must apply the same stored transform and produce exactly what the editor preview showed. No re-deriving from CSS layout. Clamp the transform so the visible area never escapes the source image, with no white slivers at the edges. Handle EXIF orientation before any math, or portrait phone photos will crop sideways.
Done when: the exported pixels match the editor preview for any pan and zoom, extreme zoom-out cannot reveal empty space in the slot, and a rotated phone photo crops the region the user actually selected.Build the locking system for brand templates. A template author marks each element locked or editable, and editable slots carry constraints: a text slot with a maximum length and fixed font, an image slot that accepts replacement but not repositioning.
Derived designs store only overrides for editable slots, never copies of the whole template, so the template stays the single source of truth and later template fixes flow into existing designs. Enforce the constraints server-side on every save: an override targeting a locked element is rejected outright, and an override that breaks slot rules — text too long, wrong element type — is rejected with a specific error. The client should gray out locked elements, but the server is the real wall.
Handle template evolution: unlocking an element later is fine; locking one that existing designs already override needs a defined policy — freeze the override or revert it, pick one and log it.
Done when: no API request can move or replace a locked logo in a derived design, slot constraint violations fail with named reasons, and fixing a typo in the template updates every derived design that didn't override that slot.Build the image upload pipeline for a design tool.
Trust nothing about the upload: ignore the client's declared MIME type and file extension, and sniff the decoded content to verify it's actually a PNG, JPEG, or WebP. Reject SVG entirely — it's executable. Decode the image server-side and enforce a pixel-dimension cap before the full decode where possible; a 40000x40000 PNG is a decompression bomb that fits in a small file. Re-encode the accepted image, which as a side effect strips EXIF metadata: GPS coordinates, device serials, embedded thumbnails of previous crops.
Store results in a private bucket keyed by content hash, deduplicating identical uploads, and serve them only through short-lived signed URLs tied to an authorization check. Record the original filename separately for display, sanitized.
Done when: a renamed .html file is rejected despite its .png extension, an accepted photo's stored bytes contain no EXIF blocks, and a decompression-bomb PNG fails fast without exhausting server memory.Build the export renderer for a template-based design tool. Export produces a PNG or JPEG at the template's exact dimensions, say 1080 by 1080, whatever the editor zoom or screen density.
Render from a saved design revision, not live editor state: when the user clicks export, persist the current state as a numbered revision and render that. If the render fails and the user retries, or the user keeps editing while the render runs, the retry renders the same revision and produces identical pixels. Load the exact fonts the design uses before drawing — a font fallback silently changing metrics is the classic corrupted-export bug — and fail loudly if a font can't load rather than substituting.
Support transparent backgrounds only for PNG, and reject the combination of JPEG plus transparency with a clear message. Verify output dimensions after rendering.
Done when: two exports of the same revision are byte-identical, editing during a render doesn't change what that render produces, and a missing font fails the export with an error instead of shipping wrong text metrics.Canva costs $15–$30 per person per month on its public paid plans, which is $180–$360 per year for each person on your team. A focused self-built replacement costs your build time plus almost-free hosting.
The build prompt on this page comes in four flavors: the AHA stack (Astro, HTMX, Alpine.js), Next.js, Laravel, and Ruby on Rails. The capability context for this product is Astro, Alpine, Canvas API. Choose the stack you already know — the scope matters more than the framework.
A useful v1 needs: fixed-size templates with editable text and image slots; brand colors, fonts, logo, and safe-area guides; drag, resize, align, layer, and undo for supported elements; image upload, crop, and fit controls; PNG and JPEG export at the template dimensions. Everything else is scope creep until you truly miss it.
Don't build collaborative editing, stock media, generative AI, presentations, video, or a public template marketplace.
Yes. Canva, Adobe Express and Kittl all do the same core job — turn a handful of locked brand templates into correctly sized downloadable images. The scoped v1 on this page covers what most people use any of them for, so one focused build replaces whichever one you pay for today.
Yes. Avnac is open source: the code is public and installing it costs nothing. At most you pay for hosting if you put it on a server, often a few euros a month. Canva Pro, on the other hand, costs €12 a month.
No. The level is beginner and the install takes about 5 minutes with the prompt from the page: Claude does the work, you answer its questions.
Avnac does most of what Canva Pro does, without a subscription, and your data stays with you. The point-by-point comparison is on the page.
Yes. With an open source tool installed on your side, your files stay on your machine or your server. Nobody can close your account or change the price.
No time to do it?
If you'd rather have someone install it, connect it to your tools and keep it running, that is exactly what we do at Aurelio.
Book an Automation Audit