Skip to content

README.md

Latest commit

 

History

History
77 lines (60 loc) · 3.31 KB

README.md

File metadata and controls

77 lines (60 loc) · 3.31 KB
Raw

BeBrief Studio

v2.1.0 — A premium, modular case study editor for Behance. Build, style and export stunning project briefs with a live canvas, dedicated section editors, multi-project dashboard, JSON portability, and native macOS distribution via Tauri.

Key Features

  • Live Canvas Editing — Click any text directly on the canvas to edit in place. Edits are instant with no modal dialogs.
  • 15 Section Types — Cover, Overview, Problem, Process, Color Palette, Typography, Mockups, UX Flow, Results, Footer, Testimonial, Team, Awards, Tech Stack, Timeline. Each has a dedicated inspector with full content and style controls.
  • Multi-Project Dashboard — Create, duplicate, delete and switch between projects. Export any project as a .bbs.json portable file; import it on any device.
  • JSON Portability — Save the entire project state (sections, styles, theme, custom tokens) to a versioned .bbs.json file and restore it later.
  • Theme System — 8 built-in themes plus a fully interactive custom theme creator with live color pickers and typography selectors. All themes powered by CSS custom properties.
  • Per-Section Font Override — Override the display font on any individual section independently of the global theme.
  • Auto-Zoom Canvas — The canvas scales to fit any viewport width automatically. Works on both desktop and mobile.
  • High-Resolution Exports — Standalone HTML (self-contained with inlined CSS), PNG and WebP images at 1600px Behance width.
  • Keyboard Shortcuts — Cmd/Ctrl+Z undo, Cmd/Ctrl+Shift+Z redo, Escape to deselect.
  • Undo / Redo — 30-step history for every section and style mutation.
  • Duplicate Section — One-click section duplication in the sidebar.
  • Toast Notifications — Non-blocking success/error/info feedback for all actions.
  • OCR Image Import — Tesseract.js v7 OCR to extract text from uploaded images and map it to section fields.
  • Progressive Web App — Installable PWA with offline support and Google Fonts cached via Workbox.
  • Native macOS App — Tauri v2 desktop wrapper with native file save dialogs and binary image write support.
  • i18n — Full UI localization in English, Spanish and Portuguese.
  • Mobile Tab Bar — Three-tab bottom navigation (Sections / Canvas / Inspector) on narrow viewports.

Technology Stack

  • Core: React 19, TypeScript, Vite 8
  • Styling: Tailwind CSS v4, Lucide React
  • State: Zustand (single store, undo/redo stacks)
  • DnD: @dnd-kit/sortable
  • Export: html-to-image, custom HTML serializer
  • OCR: Tesseract.js v7
  • Desktop: Tauri v2 (@tauri-apps/cli, plugin-fs, plugin-dialog)
  • PWA: vite-plugin-pwa + Workbox
  • i18n: react-i18next

🚀 Getting Started

Prerequisites

  • Node.js (v18 or higher)
  • npm or yarn

Installation

  1. Clone or copy this repository to your workspace.
  2. Install dependencies: 
    npm install
  3. Run the local development server: 
    npm run dev
  4. Build for production: 
    npm run build

Getting Started

npm install
npm run dev          # dev server with HMR
npm run build        # type-check + production build
npm run tauri build  # native macOS .app / .dmg

See CHANGELOG.md for full version history.