Vite + React Setup

Introduction

Learn how to use Tetrons and integrate it into a Vite + React project. This guide covers creating a modern React app with Vite and embedding the Tetrons editor.

Vite + React Integration with Tetrons

The official Tetrons React package will be released soon. For now, we'll use the Tetrons React wrapper as a placeholder while keeping the same structure Tetrons will follow.

Prerequisites

Node.js ≥ 18, npm or yarn

1. Create React App with Vite

npm create vite@latest tetrons-react-demo -- --template react

2. Navigate to Project Directory

cd tetrons-react-demo

3. Install Editor Package

Install Tetrons React wrapper as a placeholder. Tetrons has released its official package 2.4.4

npm install tetrons

4. Edit src/App.jsx

import React, { useState } from "react";
import TetronsEditor from "tetrons";
import "tetrons/style.css";
import "./App.css";

export default function App() {
  const [saving, setSaving] = useState(false);

  const [savedDocumentJson] = useState({
    type: "doc",
    content: [
      {
        type: "paragraph",
        content: [
          {
            type: "text",
            text: "Hello 👋 This document was loaded when the editor started.",
          },
        ],
      },
      {
        type: "paragraph",
        content: [
          {
            type: "text",
            text: "You can now edit, autosave, and track versions.",
          },
        ],
      },
    ],
  });

  return (
    <div className="app-root">
      <div className="editor-panel full-width">
        <div className="editor-status">
          {saving ? "Saving…" : "All changes saved"}
        </div>

        <div className="editor-container">
          <TetronsEditor
            apiKey="Your API key"
            initialContent={{ json: savedDocumentJson }}
            onLoad={() => setSaving(false)}
            onChange={() => setSaving(false)}
            config={{
              features: {
                separator: true,
                newFile: true,
                openFile: true,
                saveFile: true,
                cut: true,
                copy: true,
                paste: true,
                undo: true,
                redo: true,
                bold: true,
                italic: true,
                underline: true,
                strikeout: true,
                subscript: true,
                superscript: true,
                fontColor: true,
                highlightColor: true,
                clearFormatting: true,
                bulletedList: true,
                numberedList: true,
                lineHeight: true,
                letterSpacing: true,
                indentIncrease: true,
                indentDecrease: true,
                alignLeft: true,
                alignCenter: true,
                alignRight: true,
                alignJustify: true,
              },
              addOns: {
                insertTable: true,
                insertImage: true,
                insertVideo: true,
                insertAudio: true,
                insertCheckboxList: true,
                insertLink: true,
                insertComments: true,
                insertEmoji: true,
                insertHorizontalRule: true,
                insertEmbedVideo: true,
                zoomIn: true,
                zoomOut: true,
                print: true,
                exportFile: true,
                resetFormatting: true,
                preview: true,
                spellCheck: true,
                voice: true,
                ai: true,
                languageConverter: true,
                codeEditor: true,
                mathEquation: true,
                virtualKeyboard: true,
                getContentFromImage: true,
              },
              autoSave: true,
              showVersions: true,
              ui: {
                topMenu: true,
                paragraphDropdown: true,
                fontDropdown: true,
                fontSizeDropdown: true,
              },
            }}
          />
        </div>
      </div>
    </div>
  );
}

5. Add API Key (Optional)

If required for cloud usage or premium features, replace "YOUR_API_KEY" with your actual Tetrons API key.

Running the Vite + React App

npm run dev
Press Ctrl + C to stop the server.

Build & Deploy

Build the app: npm run build Preview the build: npm run preview Copy the contents of the dist/ folder to your preferred web server: Apache: /var/www/html Nginx: /usr/share/nginx/html

Chatbot