Drag-and-drop visual canvas based on GrapesJS, supporting blocks, containers, multi-column grids, text, buttons, media, dividers, and other elements
ViteReactHTMLStarter
html-visual-builder — Vite Starter Template
By reyad-dev
A visual web builder based on React, TypeScript, and GrapesJS that supports drag-and-drop layout, multi-device preview, CSS property inspection, and export to standalone HTML5 or PDF via browser printing, with built-in Arabic fonts and RTL/LTR support.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-16View source
What stands out
A quick read of the recorded project description.
CSS inspector covering Display, Flexbox, Grid, typography, color, margin and padding, sizing, borders, and shadows
One-click responsive preview across desktop, tablet (768px), and mobile (375px) viewports
Export to a standalone HTML5 file, or output PDF via the browser print dialog
Built-in Arabic fonts such as Alexandria, Cairo, and Tajawal, with RTL/LTR bidirectional text support
Persist projects with IndexedDB and LocalStorage, supporting automatic recovery, duplication, renaming, and deletion
Template Details
HTML Visual Builder is a visual web builder for developers, designers, and marketers. It uses GrapesJS as the visual editing engine, with a React and TypeScript interface, letting you drag blocks, containers, multi-column grids, text, buttons, media, dividers, and other elements onto the canvas with real-time snapping and drop feedback. The editor provides a CSS inspector for adjusting Display, Flexbox, Grid, typography, color, margin and padding, sizing, borders, and shadows; it supports preview switching between desktop, tablet (768px), and mobile (375px) viewports.
The project includes preset templates for a SaaS product landing page, personal portfolio, corporate/organization showcase, and a basic canvas, and provides Arabic fonts such as Alexandria, Cairo, and Tajawal plus Inter and JetBrains Mono, with bidirectional text (RTL/LTR) support. For export, it can generate a standalone HTML5 file with scoped CSS, or output PDF via the browser print dialog (Ctrl+P) together with @media print rules.
Persistence uses IndexedDB and LocalStorage, supporting automatic state recovery, project duplication/renaming/deletion, and unsaved-state tracking; for security it uses DOMPurify for XSS sanitization and includes CSS AST parsing, external remote resource detection, and iframe isolation. The README does not provide information on performance metrics, specific browser compatibility ranges, or production deployment workflows.
ViteReactHTMLStarter
Is it right for your project?
Use Cases
- Quickly build responsive landing pages, portfolios, or corporate showcase pages and export standalone HTML
- Web design requiring Arabic typography and RTL/LTR bidirectional text support
- Visual editing of page layout and style adjustments via drag-and-drop and the CSS inspector
- Output designs as PDF documents via the browser print function
Suitable For
- Front-end developers who need visual editing and HTML export
- Designers working on web layout and style design
- Marketing and content staff creating Arabic or bilingual web pages
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js v18.0.0 or higher, plus npm, yarn, or pnpm.
- 2
After cloning the repository, run npm install to install dependencies, then run npm run dev to start the local development server, with the default address at http://localhost:5173.
- 3
npm run build compiles TypeScript and generates a production build, npm test runs Vitest tests, and npm run typecheck and npm run lint perform type checking and ESLint validation respectively.
- 4
The README does not provide production deployment steps or hosting environment requirements.
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of that version and does not mean external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as-is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis
https://github.com/reyad-dev/html-visual-builder/blob/main/LICENSEhttps://github.com/reyad-dev/html-visual-builder/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
Compiled by DeepSeek based on repository license and README ·2026-10-16. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 85 / 100
- Technologies
- Vite · React · HTML
- Website type
- Starter
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-10-16
- Screenshot last checked
- 2026-10-16
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: codex-user-requested-batch-review-20261017 · 2026-10-16
Inspect the recorded source material
SHA-256: 709291a7ef5f3f3a753c3723aca7085b0bc6ae2ca9cd2957375309163fd788cf
2026-10-16T03:49:24.059Z
Source file / repository# 🚀 HTML Visual Builder — Next-Gen Drag & Drop Web Page Builder ### محرر صفحات الويب المرئي بالسحب والإفلات وتصدير HTML & PDF احترافي [](https://reyad-dev.github.io/html-visual-builder/) [](https://github.com/reyad-dev/html-visual-builder) [](https://www.typescriptlang.org/) [](https://react.dev/) [](https://grapesjs.com/) [](https://vitejs.dev/) [](https://vitest.dev/) [](LICENSE) > 🌐 **Live Demo (جرّب المحرر أونلاين فوراً):** > **[https://reyad-dev.github.io/html-visual-builder/](https://reyad-dev.github.io/html-visual-builder/)** > **HTML Visual Builder** is an enterprise-grade, high-fidelity visual web page builder designed for developers, designers, and marketers. Build modern responsive layouts with drag-and-drop ease, inspect and style CSS properties with millimeter precision, preview across multiple device viewports, and export clean, standalone HTML5 documents or vector-grade PDFs with first-class Arabic typography support. --- ## 🌟 Highlights & Key Features | أبرز المميزات - 🎯 **Intuitive Drag & Drop Canvas (محرر سحب وإفلات مرئي):** Drag sections, containers, multi-column grids, typography, buttons, media, and dividers directly onto the visual artboard with realtime snap and drop feedback. - 🖨️ **Print & Export to PDF (طباعة وتصدير عالي الدقة كـ PDF):** Export your designs directly to standalone vector PDF documents using native `@media print` rules and browser print dialogs (`Ctrl + P`), preserving exact layout fidelity, background colors, and web fonts. - 🌐 **First-Class Arabic Typography (دعم الخطوط العربية الحديثة):** Native integration of Google Fonts: **Alexandria**, **Cairo**, and **Tajawal** alongside Inter and JetBrains Mono. Built-in bi-directional (RTL/LTR) support ensures Arabic text renders with supreme typographic beauty. - ⚡ **Zero-Dependency Standalone Export (تصدير كود HTML5 & CSS نظيف ومستقل):** Generate deterministic, production-ready HTML5 files with scoped CSS. Completely self-contained, offline-compatible, and free of vendor lock-in. - ✨ **Pre-built Starter Templates Gallery (مكتبة قوالب وأمثلة جاهزة):** Instant access to curated, responsive templates including SaaS Landing Pages, Personal Portfolios, Business & Agency Showcases, and starter canvas examples. - 📱 **Multi-Device Responsive Previews (معاينة متعددة الأجهزة):** One-click responsive toggles between **Desktop**, **Tablet (768px)**, and **Mobile (375px)** viewports with synchronized canvas scaling. - 🎛️ **Comprehensive CSS Inspector (مفتش الخصائص والأنماط):** Visual controls for Display, Flexbox, Grid, Typography, Colors, Spacing (Margin & Padding), Dimensions, Borders, and Drop Shadows. - 💾 **Local Offline Persistence (حفظ تلقائي وإدارة المشاريع):** IndexedDB and LocalStorage persistence engine with automatic state restoration, project duplicate/rename/delete capabilities, and dirty state tracking. - 🛡️ **Enterprise-Grade Security & Sanitization (أمان وحماية متقدمة):** Strict XSS sanitization powered by DOMPurify, CSS AST parsing, external remote resource detection, and safe iframe isolation. --- ## 📂 Pre-built Example Templates | القوالب الجاهزة | Template | Category | Description | Arabic Title | | :--- | :--- | :--- | :--- | | **SaaS Product Landing** | `Landing Page` | Modern conversion-focused landing page with hero, 3-column features grid, and CTA | صفحة هبوط تطبيق ومنتجات رقمية | | **Personal Portfolio & Bio** | `Portfolio` | Clean personal website showcase featuring bio, skills pills, project cards, and social links | معرض أعمال وسيرة ذاتية شخصية | | **Business Agency Showcase** | `Business` | High-impact corporate agency layout with metrics counters and contact sections | صفحة شركة وخدمات أعمال | | **Starter Visual Canvas** | `Starter` | Clean centered starter layout with section, heading, button, and responsive columns | المثال الأساسي المنسق | --- ## 🛠️ Tech Stack & Architecture | البنية التقنية - **Core Framework:** [React 19](https://react.dev/) + [TypeScript 5.9](https://www.typescriptlang.org/) - **Visual Builder Engine:** [GrapesJS Core 0.23](https://grapesjs.com/) (Headless adapter pattern) - **State Management:** [Zustand 5](https://github.com/pmndrs/zustand) - **Security & Sanitization:** [DOMPurify 3.4](https://github.com/cure53/DOMPurify) - **Build Tool:** [Vite 6](https://vitejs.dev/) - **Testing Suite:** [Vitest 5](https://vitest.dev/) (133 unit & integration tests) - **Typography:** Alexandria, Cairo, Tajawal, Inter, JetBrains Mono --- ## 🚀 Quick Start | البدء السريع ### Prerequisites - [Node.js](https://nodejs.org/) (v18.0.0 or higher) - npm or yarn or pnpm ### Installation ```bash # Clone the repository git clone https://github.com/reyad-dev/html-visual-builder.git # Navigate into the project directory cd html-visual-builder # Install dependencies npm install # Start local development server npm run dev ``` Open your browser at `http://localhost:5173` to start designing! --- ## ⌨️ Keyboard Shortcuts | اختصارات لوحة المفاتيح | Shortcut | Action | Description | | :--- | :--- | :--- | | `Ctrl + S` / `Cmd + S` | **Save Project** | Saves current canvas state to browser storage | | `Ctrl + P` / `Cmd + P` | **Print / Export PDF** | Opens print dialog to print or save vector PDF | | `Ctrl + Z` / `Cmd + Z` | **Undo** | Reverts the last editor action | | `Ctrl + Shift + Z` / `Ctrl + Y` | **Redo** | Re-applies the previously undone action | | `Ctrl + D` / `Cmd + D` | **Duplicate** | Duplicates currently selected element | | `Delete` / `Backspace` | **Delete Element** | Removes currently selected element from canvas | --- ## 🧪 Testing & Verification | الاختبارات والتحقق The project maintains 100% test pass rate across 18 test suites covering core editor logic, DOM sanitization, export generators, persistence, and UI components. ```bash # Run unit and integration tests npm test # Run tests in watch mode npm run test:watch # Run TypeScript typecheck npm run typecheck # Run ESLint validation npm run lint ``` --- ## 📦 Project Scripts | أوامر المشروع - `npm run dev` — Launches Vite local dev server with HMR. - `npm run build` — Compiles TypeScript and creates optimized production bundle. - `npm run test` — Executes all Vitest suites. - `npm run typecheck` — Typechecks codebase with strict TypeScript compiler. - `npm run lint` — Lints project files with ESLint. - `npm run format` — Formats codebase using Prettier. --- ## 👤 Author & Maintainer | المطور **Mohamed Reyad** — Full Stack Web Developer & UI/UX Architect - **GitHub:** [@reyad-dev](https://github.com/reyad-dev) - **Role:** Web Design, Automation & Architecture --- ## 📄 License | الترخيص This project is open-source and licensed under the [MIT License](LICENSE).
Explore similar templates
Compare previews and descriptions within the same stack and category.
cove
Cove is a minimal TanStack Start starter template maintained by mugnavo, integrating React, TanStack Router/Query, Tailwind CSS, shadcn/ui, Drizzle ORM with PostgreSQL, Better Auth, Vite Plus, and Nitro.
Vite · SaaS
vite-react-boilerplate
A production-ready Vite + React starter template with TypeScript, Tailwind CSS, TanStack Router/Query/Table, Storybook, React Hook Form + Zod, Vitest and Playwright testing, plus Husky/Commitizen/Commitlint commit conventions.
Vite · Starter
vital
Vital is a Vite-based React starter template using TypeScript and Tailwind CSS, with an Atomic Design component directory, path aliases and Hero Icons.
Vite · Starter
react-vite-admin
A backend management starter built on Vite and React, integrating Recoil, React Query, TypeScript, and Axios, with Ant Design-style interface screenshots. Suitable as a starting point for management-side projects, licensed under MIT, with Chinese documentation and common scripts.
Vite · Admin dashboard
typescript-react_best_practices-vite_template
A Vite + React + TypeScript starter template by CodelyTV, preconfigured with Jest and React Testing Library unit tests, Cypress end-to-end tests, ESLint and Prettier using Codely's shared configuration, GitHub Actions workflows, a Makefile, and Sass.
Vite · Starter
cloudflare-starter-kit
A Cloudflare Workers project scaffolding template maintained by kriasoft, using Vite and TypeScript, with three built-in workspaces: api, app, and edge, and preconfigured local testing, multiple environments, and a GitHub Actions deployment workflow.
Vite · Starter