Skip to content

vite-quickstart

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

vite-quickstart

README.md

PrimeUI Pro Text Editor React Vite Quickstart

A minimal React and Vite application for starting with PrimeUI Pro Text Editor for React. It contains one editable document, application-owned PrimeOne toolbar parts, and a lightweight topbar and footer with light and dark modes.

Run the App

corepack pnpm install
cp .env.example .env
corepack pnpm dev

Set your PrimeUI Pro license key in .env:

VITE_PRIMEUI_LICENSE=your-license-key

What the Example Shows

  • Text Editor, PrimeReact, Aura, styles, icons, and license setup in src/main.tsx
  • A controlled HTML document using the value and onValueChange props
  • Formatting, headings, lists, checklists, and history controls
  • Editable PrimeOne toolbar parts using PrimeReact controls
  • A persistent light and dark mode switch

Project Map

src/
├── main.tsx                          Keep: component, theme, styles, and license setup
├── components/primeui/texteditor/   Keep or edit: application-owned PrimeOne UI parts
├── components/shell/                Optional: quickstart topbar and footer
├── hooks/useAppTheme.ts             Optional: light and dark mode state
├── demo/texteditor/                 Replace: sample document and editor composition
└── App.tsx                           Replace: one-page quickstart composition

Replace src/demo/texteditor/TextEditorDemo.tsx with your document and persistence logic. Delete src/demo/texteditor after it is no longer imported. The Text Editor value is application state; save it to your store or API when it changes.

PrimeOne UI Parts

The toolbar parts are copied into and owned by this application. Regenerate the complete PrimeOne set with:

corepack pnpm dlx @primeui/cli add texteditor --framework react --ui primeone --output-dir ./src/components/primeui

Commands

corepack pnpm dev
corepack pnpm build
corepack pnpm preview

Documentation