Tetrons Documentation

← Back to Home

Tetrons Documentation

Tetrons Documentation

Learn how to use Tetrons and integrate Tetrons into your project. This guide walks you through everything you need.

Tetrons: Core Editor

Tetrons provides a distraction-free writing experience. Learn its features and usage here.

🔍 Validating API key...

Getting Started with Tetron

1. System Requirements

Before setting up Tetron, ensure your environment meets the following prerequisites:

  • Node.js v18 or above – Required to run build tools and support modern ECMAScript features.
  • npm or yarn – For installing Tetron and its dependencies.
  • Git – To clone the Tetron repository or manage plugin modules.
  • Modern Web Browser – Chrome, Firefox, Safari, or Edge for full compatibility.
  • Recommended Tools: VS Code, Vite, or live-server for local development and live reload.

2. Installation Steps

A. Create a New Project (React Example)

npx create-react-app tetron-demo cd tetron-demo # or with Vite npm create vite@latest tetron-demo -- --template react cd tetron-demo npm install

B. Install Tetron via npm or yarn

npm install tetrons # or yarn add tetrons

3. Basic Integration

Import and render Tetron in your component (e.g., App.js or App.tsx):

import React from 'react'; import TetronEditor from 'tetrons'; function App() { return ( <div style={{ padding: '2rem' }}> <h1>Welcome to Tetron Editor</h1> <TetronEditor config={{ placeholder: "Start writing here...", toolbar: ['bold', 'italic', 'link', 'code', 'image'] }} /> </div> ); } export default App;

You can pass configuration props like toolbar, placeholder, or use onChange to track content updates.

4. Customization (Optional but Recommended)

  • Modify the toolbar: ['bold', 'italic', 'underline', 'link']
  • Apply dark/light themes using CSS
  • Use custom plugins (mentions, tables, uploads)
  • Hook into lifecycle methods like onInit, onSave, onUpload

5. Run Your Project

npm start # or yarn start

Open http://localhost:3000 in your browser.

6. Building for Production

npm run build

This bundles your app (including Tetron) for optimized deployment.

Chatbot