Learn how to use Tetrons and integrate it into your project. This guide walks you through everything you need.
The official Tetrons React component enables seamless integration of the rich-text editor into React applications. This guide walks through setting up a modern React app with Vite and embedding the Tetrons editor.
Node.js ≥ 18, npm or yarn
1npm create vite@5 tetrons-react-demo -- --template react-swc1cd tetrons-react-demoInstall TinyMCE React wrapper as a placeholder. Tetrons will release its official package soon (e.g., @tetrons/tetrons-react). For now, follow the structure based on TinyMCE.
1npm install @tinymce/tinymce-react1import { 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;If required for cloud usage or premium features, replace "no-api-key" with your actual Tetrons API key.
1npm run dev
2Press Ctrl + C to stop the server.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