Vite + React Setup

1

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.

2

Vite + React Integration with Tetrons

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

3

Prerequisites

Node.js ≥ 18, npm or yarn

4

1. Create React App with Vite

1npm create vite@5 tetrons-vite-demo -- --template react-swc
5

2. Navigate to Project Directory

1cd tetrons-vite-demo
6

3. Install Editor Package

Install TinyMCE React wrapper as a placeholder. Replace it with @tetrons/tetrons-react when officially available.

1npm install @tinymce/tinymce-react
7

4. Edit src/App.jsx

1import { useEffect, useState } from "react";
2import { initializeTetrons, isApiKeyValid, EditorContent } from "tetrons";
3import "tetrons/style.css";
4 
5function App() {
6  const apiKey = "your_api_key";
7 
8  const [loading, setLoading] = useState(true);
9  const [isValid, setIsValid] = useState(false);
10  const [error, setError] = useState("");
11 
12  useEffect(() => {
13    console.log("🚀 App mounted in web component iframe");
14 
15    async function validate() {
16      try {
17        console.log("🔑 Validating API key...");
18        await initializeTetrons(apiKey);
19        setIsValid(isApiKeyValid());
20      } catch (err) {
21        console.error("❌ Error validating key", err);
22        setError(err.message);
23      } finally {
24        setLoading(false);
25      }
26    }
27 
28    validate();
29  }, [apiKey]);
30 
31  if (loading) {
32    return <div>🔍 Validating API key...</div>;
33  }
34 
35  if (!isValid) {
36    return <div style={{ color: "red" }}>❌ API Key Invalid: {error}</div>;
37  }
38 
39  return (
40    <div style={{ padding: "2rem" }}>
41      <EditorContent apiKey={apiKey} />
42    </div>
43  );
44}
45 
46export default App;
8

5. Add API Key (Optional)

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

9

Running the Vite + React App

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

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