OpenCanvas

An open-source visual creation platform built on a real design engine. Every element stays editable — text, images, shapes, frames and layers — and Arabic is supported properly from day one.

Website: devehab.github.io/OpenCanvas (English and Arabic, with a one-minute video tour and recorded demos of every feature)

OpenCanvas is not a template viewer or a UI prototype. Designs are structured documents; every change is a validated, undoable command; the same renderer draws the editor, every export and the server-side tests. That foundation is what later phases — templates, brand kits, video, real-time collaboration and AI that edits designs instead of generating flat images — are built on.

ملخص بالعربية ↓

Highlights

• Structured documents, never flattened. Pages, layers, groups and frames are records in a document model with schemas, limits and canonical serialization (format).
• Command-based editing. 27 validated commands drive the UI, undo/redo (with gesture batching) and autosave — and can be exported as tool definitions for AI agents.
• Real Arabic support. Contextual shaping, Unicode bidi for mixed Arabic/Latin/number text, correct line breaking, Arabic lists and justification, 30 Arabic font families, and a fully mirrored right-to-left interface.
• Professional editor. 210 shapes (basic shapes, polygons, stars and badges, arrows, speech bubbles, banners, flowchart symbols, signs, soft and organic shapes, 3D solids), 27 lines and curves, 28,342 open-source icons from nine libraries (Lucide, Tabler, Bootstrap, Heroicons, Hugeicons, Material, Radix, Remix, and 271 country flags), searchable in English and Arabic, 237 photo frames you drag photos into (shapes, arches, brush and paper edges, Latin and Arabic letters, numbers, Polaroids, framed prints, collage grids, device mockups), loaded only when you open them, Canva-style crop mode, gradients, strokes, shadows, blur, 16 blend modes, image adjustments, rulers and guides, snapping, alignment, layers, and pages in single, thumbnail, scroll and grid views.
• Brand kits, projects and templates. Several brand kits (logos, palettes, fonts, voice, photos, graphics, icons, templates) usable from the editor, folders for designs and uploads, and your own templates in folders with icons: save any design as a template, and using one opens a copy in a new tab while the template stays as it is. Six starter templates come built in, in English and Arabic.
• Your fonts, icons and plugins. 71 bundled font families (30 Arabic), and you can upload your own fonts (TTF, OTF, WOFF, WOFF2) and SVG icons. Plugins add commands, panels, icon packs and fonts; they run in a sandbox with the permissions you approve (build a plugin, دليل تطوير الإضافات).
• Start from any file. Drop an image or a PDF on the dashboard: images become pages of their size, PDF pages become editable pages you can reorder and export again.
• Local-first and safe. Designs save to the browser instantly, work offline, survive closing the tab mid-edit, and two tabs can never overwrite each other.
• Export. PNG, JPEG and WebP (any scale or DPI, transparent backgrounds, compressed palette PNGs, or a maximum file size), SVG with embedded fonts, PDF and print PDF, any set of pages (hidden pages skipped), multi-page ZIPs, and the editable .opencanvas format.
• Tested like a product. 1,101 unit, property and golden-image tests; 124 Playwright tests (including a plugin that tries to escape its sandbox, and cloud sync against a real S3 server) including visual regression, WCAG 2.1 AA scans, keyboard-only use and frame-rate budgets.

Install

One line, nothing to install first (no Node.js, pnpm or Git). It downloads everything it needs, runs OpenCanvas in the background on port 4790 (3000 stays free for your own projects), starts it with the computer and opens it in your browser.

macOS and Linux (Terminal):

curl -fsSL https://raw.githubusercontent.com/Devehab/OpenCanvas/HEAD/install.sh | bash

Windows (PowerShell, no administrator rights needed):

irm https://raw.githubusercontent.com/Devehab/OpenCanvas/HEAD/install.ps1 | iex

Then use the opencanvas command:

Command	What it does
opencanvas stop	Stops it; it no longer starts with the computer
opencanvas start	Starts it again, and with the computer from now on
opencanvas status	Is it running, and where
opencanvas open	Opens it in the browser
opencanvas update	Installs the latest version (keeps the port, so your designs stay)
opencanvas cloud	Keep your work in your own R2 / S3 bucket too (or change it)
opencanvas uninstall	Removes it (designs stay in the browser and in your bucket)

Your computer, or your cloud too. The installer asks once where to keep your work: on this computer only, or also in your own Cloudflare R2 or Amazon S3 bucket. With the cloud, everything is saved on the computer first and synced when online; without internet it keeps working, marks what is "This computer only", and uploads it when the connection is back. Reinstalling (or a new computer) with the same bucket brings everything back. The keys stay on your computer. Change it any time with opencanvas cloud (how it works).

Options: OPENCANVAS_PORT=5000 picks another port on the first install, OPENCANVAS_VERSION=v0.1.0 a specific release. The installers are tested on fresh macOS, Windows, Ubuntu, Debian, Fedora and Alpine machines by the install test workflow. New versions are published by the Release workflow (Actions → Release → Run workflow).

Develop

Requirements: Node.js 22+ and pnpm 10 (corepack enable).

pnpm install
pnpm dev                    # http://localhost:3000

Production:

pnpm build && pnpm start    # or:
docker compose up -d --build

See deployment for Docker, Coolify and Hetzner.

How it works

UI (React) ──dispatch──▶ Commands ──▶ Transactions ──▶ Document store ──▶ Renderer (Canvas2D)
    ▲                    (validated)    (atomic)        (records)          editor · exports · Node
    └──── subscribe ◀── Editor state ◀── History (diffs) ◀──┘

React never owns design state; the document model does. Read the architecture for the store, history, text engine, rendering, persistence and security model.

Package	Role
@opencanvas/core	Document model, schemas, store, commands, history, geometry, text layout, serialization
@opencanvas/renderer	Canvas2D renderer for the browser and Node (Skia)
@opencanvas/export	PNG/JPEG/WebP, SVG, PDF, .opencanvas packages, upload validation
@opencanvas/editor	Selection, tools, gestures, snapping, keyboard, clipboard, text editing, canvas view
@opencanvas/web	Next.js dashboard and editor, local persistence, English/Arabic UI

Testing

pnpm lint && pnpm typecheck
pnpm test                       # Vitest
pnpm build && pnpm test:e2e     # Playwright

Details, including how each item of the spec's test plan maps to a suite: docs/testing.md.

Roadmap

Phase 1, the editor engine, is complete. Next: the design platform (accounts, server sync, templates, brand kits, fonts, vector PDF), then video, collaboration, AI, the visual suite and the plugin ecosystem. See the roadmap and the full product specification.

Contributing

Contributions are welcome — start with CONTRIBUTING.md and the Definition of Done. Please report security issues privately (SECURITY.md).

License

MIT. The bundled icon library comes from Lucide (ISC), Tabler Icons, Bootstrap Icons, Heroicons, Hugeicons (the free set), Radix Icons and Flag Icons (MIT), and Material Icons and Remix Icon 4.6.0 (Apache 2.0), all free for commercial use; see their licenses. Regenerate it with node scripts/generate-icon-library.mjs, which also checks every icon against its original drawing.

---

بالعربية

‏OpenCanvas منصّة مفتوحة المصدر للتصميم المرئي، مبنيّة على محرّك تصاميم حقيقي: يبقى كل عنصر قابلًا للتعديل — النصوص والصور والأشكال والإطارات والطبقات — ولا يُحفَظ التصميم صورةً مسطّحة أبدًا.

الموقع: devehab.github.io/OpenCanvas، وفيه جولة مصوّرة بالعربية في دقيقة واحدة.

ما يميّزها

• تصاميم منظَّمة: الصفحات والطبقات والمجموعات سجلّاتٌ في نموذج مستندات له مخطّطات وحدود وتسلسل ثابت، لا صور.
• تحرير قائم على الأوامر: يمرّ كل تعديل عبر أمر موثّق ومتحقَّق منه، فيعمل التراجع والإعادة والحفظ التلقائي — ولاحقًا التعاون والذكاء الاصطناعي — عبر المسار نفسه.
• دعم حقيقي للعربية: وصل الحروف وأشكالها السياقية، والنصوص ثنائية الاتجاه التي تجمع العربية والإنجليزية والأرقام في السطر نفسه، وكسر الأسطر الصحيح، والقوائم والمحاذاة الكاملة للفقرات العربية، وثلاثون عائلةَ خطوط عربية، وواجهة كاملة من اليمين إلى اليسار.
• حفظ محلي أولًا: تُحفَظ التصاميم في المتصفح فورًا، وتعمل دون اتصال، ولا تضيع التعديلات عند إغلاق التبويب، ولا يكتب أي تبويب فوق تعديلات تبويب آخر.
• تصدير متكامل: ‏PNG وJPEG وWebP بأي دقة ومع خلفية شفافة عند الحاجة، وSVG مع تضمين الخطوط، وPDF وPDF للطباعة، إضافةً إلى ملف ‎.opencanvas‎ الذي يحفظ التصميم كاملًا قابلًا للتعديل.
• أدوات احترافية: 237 إطارًا للصور تسحب إليها الصورة فتأخذ شكلها (أشكال وأقواس وحروف لاتينية وعربية وأرقام وصور بولارويد ولوحات بإطارات وشبكات صور ونماذج هواتف وحواسيب)، و210 أشكال و27 خطًا ومنحنًى، وقصّ الصور بنقرة مزدوجة، ومساطر وأدلة، وعرض الصفحات بأربعة أوضاع، و28,342 أيقونة مفتوحة المصدر من تسع مكتبات، منها أعلام الدول، يمكن البحث فيها بالعربية.
• الهوية والمشاريع: حزم هوية متعددة (شعارات وألوان وخطوط وأسلوب وصور وقوالب)، ومجلدات لتنظيم التصاميم والصور.
• خطوطك وأيقوناتك وإضافاتك: ارفع خطوطك وأيقونات SVG، وثبّت إضافات تعمل في بيئة معزولة بالصلاحيات التي توافق عليها. لتطوير إضافة اقرأ دليل تطوير الإضافات.
• اختبارات صارمة: أكثر من 1,100 اختبار للوحدات، و124 اختبارًا شاملًا في المتصفح تغطي المقارنة البصرية وإمكانية الوصول والأداء والمزامنة السحابية.

التثبيت بسطر واحد

لا تحتاج إلى تثبيت أي شيء مسبقًا، فلا Node.js ولا pnpm ولا Git. ينزّل المثبّت كل ما يحتاج إليه، ويشغّل OpenCanvas في الخلفية على المنفذ 4790 (ويبقى المنفذ 3000 متاحًا لمشاريعك)، ويجعله يعمل تلقائيًا مع تشغيل الجهاز، ثم يفتحه في متصفحك.

على macOS وLinux افتح الطرفية (Terminal) والصق:

curl -fsSL https://raw.githubusercontent.com/Devehab/OpenCanvas/HEAD/install.sh | bash

وعلى Windows افتح PowerShell والصق (دون صلاحيات المسؤول):

irm https://raw.githubusercontent.com/Devehab/OpenCanvas/HEAD/install.ps1 | iex

ثم تحكّم به بالأمر opencanvas:

الأمر	ما يفعله
opencanvas stop	يوقفه، فلا يعمل مع تشغيل الجهاز بعد ذلك
opencanvas start	يشغّله من جديد، ويعمل مع تشغيل الجهاز من الآن
opencanvas status	هل يعمل؟ وعلى أي عنوان؟
opencanvas open	يفتحه في المتصفح
opencanvas update	يثبّت أحدث إصدار ويحافظ على المنفذ، فتبقى تصاميمك
opencanvas cloud	يحفظ عملك في حاوية R2 أو S3 الخاصة بك أيضًا (أو يغيّرها)
opencanvas uninstall	يزيله من الجهاز، وتبقى التصاميم في المتصفح وفي حاويتك

جهازك، أو سحابتك أيضًا: يسألك المثبّت مرة واحدة: هل تحفظ عملك على هذا الجهاز فقط، أم في حاوية Cloudflare R2 أو Amazon S3 الخاصة بك أيضًا؟ مع السحابة يُحفَظ كل شيء على الجهاز أولًا ثم يُزامَن عند الاتصال. ودون إنترنت تتابع عملك، ويظهر ما لم يُرفع بعلامة «على هذا الجهاز فقط»، ثم يُرفع حين يعود الاتصال. وإذا أعدت التثبيت أو انتقلت إلى جهاز جديد واخترت الحاوية نفسها، تعود مكتبتك كاملة. (التفاصيل)

للمطوّرين

pnpm install
pnpm dev                    # http://localhost:3000
docker compose up -d --build   # للنشر

اكتملت المرحلة الأولى (محرّك التصميم)، وتليها منصّة التصميم: الحسابات والمزامنة مع الخادم والقوالب وهويات العلامات التجارية، ثم الفيديو والتعاون والذكاء الاصطناعي. التفاصيل في خارطة الطريق ومواصفات المنتج.