Create a Rich Text Editor with Astro, Preact & CKEditor 5

Astro is a modern framework designed for ultra-fast performance by shipping only the JavaScript that's needed. Pair that with Preact, a lightweight alternative to React, and you’ve got the perfect recipe for building fast and efficient applications. To take things a step further, you can integrate CKEditor 5, a powerful rich text editor, to add robust content editing capabilities to your app.

In this article, we’ll walk you through the process of setting up an Astro + Preact project from scratch and show you how to seamlessly integrate CKEditor 5. Let’s dive in!

Why Choose Astro + Preact?

Astro:

• Minimal JavaScript by default: Astro ships only what’s necessary to the client.
• Perfect for content-focused websites: Ideal for blogs, documentation sites, and other projects where performance matters but also suitable for more complex and dynamic applications.
• Framework flexibility: Supports popular frameworks like React, Preact, Vue, Svelte, and Solid.

Preact:

• Extremely lightweight: Just ~3 kB gzipped, making it an excellent choice for performance-conscious projects.
• React ecosystem compatibility: Most React libraries work seamlessly with Preact.
• Fast and efficient: A great way to build modern, fast applications.

By combining Astro’s performance-first approach with Preact’s lightweight design, you get the best of both worlds: a highly-performant app and a pleasant developer experience.

Why CKEditor?

CKEditor is a powerful, flexible, rich text editor that enhances content creation and collaboration.

• Fast & Efficient: Great writing experience with autoformatting, merge fields, and text transformation.
• Complete Toolset for Collaboration: Real-time co-editing, track changes, and comments.
• Flexible & Customizable: Over 100 plugins are configurable toolbar are available with CKEditor

Integrating CKEditor into Astro + Preact starter will allow you to build complex applications with excellent performance and feature-rich editing experience for various use cases.

Setting Up Your Astro + Preact Project

Here’s how to go from zero to a fully functional Astro + Preact project with CKEditor 5.

Step 1: Create a New Astro Project

First, let’s create a fresh Astro project. Open your terminal and run:

npm create astro@latest

Follow the CLI’s prompts to set up your project. Astro’s installation process is straightforward and beginner-friendly.

Step 2: Add Preact to Your Astro Project

Once your Astro project is set up, it’s time to integrate Preact. Astro provides a simple way to add Preact to your project:

npx astro add preact

This command automatically updates your configuration files and installs the necessary dependencies. With just one command, Preact is ready to go!

Step 3: Generate Your CKEditor Code

CKEditor 5 is a flexible and customizable rich text editor. To add it to your project, use the CKEditor 5 Builder. Here’s how:

1. Select the preset: Start with the Classic Editor (starter) for a simple yet powerful editor.
2. Enable features: CKEditor offers over 100 plugins. Pick the features you need (e.g., bold, italic, link) and decide between free or premium options.
3. Configure the toolbar: Customize the toolbar layout to match your requirements.
4. Generate code snippets: Choose React as the technology and Cloud (CDN) as the integration method. If you’ve selected only free features, your code snippet will include a 24-hour evaluation key; alternatively, press the Sign up for trial button to create a license key and automatically propagate it in your code snippets. If you have issues, refer to License key set up documentation.

Step 4: Integrate CKEditor 5 into Your Project

Now let’s integrate CKEditor 5 into your Astro + Preact project.

1. Install CKEditor’s React Package

Install CKEditor’s React package using npm:

npm install @ckeditor/ckeditor5-react

2. Add CKEditor Styles

Create a styles folder in your project and add a file named App.css. Paste the styles provided by the CKEditor Builder into this file:

@import url('<https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap>');

@media print {
    body {
        margin: 0 !important;
    }
}

.main-container {
    font-family: 'Lato';
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.ck-content {
    font-family: 'Lato';
    line-height: 1.6;
    word-break: break-word;
}

.editor-container_classic-editor .editor-container__editor {
    min-width: 795px;
    max-width: 795px;
}

3. Create an Editor Component

Create a file named editor.jsx in the components folder. Here’s the component code, slightly modified for Preact:

import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import './App.css';

const LICENSE_KEY = 'YOUR_LICENSE_KEY_HERE';

export default function Editor() {
    const editorContainerRef = useRef(null);
    const editorRef = useRef(null);
    const [isLayoutReady, setIsLayoutReady] = useState(false);
    const cloud = useCKEditorCloud({ version: '44.1.0' });

    useEffect(() => {
        setIsLayoutReady(true);

        return () => setIsLayoutReady(false);
    }, []);

    const { ClassicEditor, editorConfig } = useMemo(() => {
        if (cloud.status !== 'success' || !isLayoutReady) {
            return {};
        }

        const { ClassicEditor, AutoLink, Autosave, Bold, Essentials, Italic, Link, Paragraph } = cloud.CKEditor;

        return {
            ClassicEditor,
            editorConfig: {
                toolbar: {
                    items: ['bold', 'italic', '|', 'link'],
                    shouldNotGroupWhenFull: false
                },
                plugins: [AutoLink, Autosave, Bold, Essentials, Italic, Link, Paragraph],
                initialData:
                    '<h2>Evaluation license key 🔑</h2>\\\\n<p>\\\\n\\\\tAn evaluation key is being used in this editor. <a href="<https://portal.ckeditor.com/checkout?plan=free>">\\\\n\\\\t\\\\tCreate an account to use your own license keys.\\\\n\\\\t</a>\\\\n</p>\\\\n\\\\n<h2>Congratulations on setting up CKEditor 5! 🎉</h2>\\\\n<p>\\\\n\\\\tYou\\\\'ve successfully created a CKEditor 5 project. This powerful text editor\\\\n\\\\twill enhance your application, enabling rich text editing capabilities that\\\\n\\\\tare customizable and easy to use.\\\\n</p>\\\\n<h3>What\\\\'s next?</h3>\\\\n<ol>\\\\n\\\\t<li>\\\\n\\\\t\\\\t<strong>Integrate into your app</strong>: time to bring the editing into\\\\n\\\\t\\\\tyour application. Take the code you created and add to your application.\\\\n\\\\t</li>\\\\n\\\\t<li>\\\\n\\\\t\\\\t<strong>Explore features:</strong> Experiment with different plugins and\\\\n\\\\t\\\\ttoolbar options to discover what works best for your needs.\\\\n\\\\t</li>\\\\n\\\\t<li>\\\\n\\\\t\\\\t<strong>Customize your editor:</strong> Tailor the editor\\\\'s\\\\n\\\\t\\\\tconfiguration to match your application\\\\'s style and requirements. Or\\\\n\\\\t\\\\teven write your plugin!\\\\n\\\\t</li>\\\\n</ol>\\\\n<p>\\\\n\\\\tKeep experimenting, and don\\\\'t hesitate to push the boundaries of what you\\\\n\\\\tcan achieve with CKEditor 5. Your feedback is invaluable to us as we strive\\\\n\\\\tto improve and evolve. Happy editing!\\\\n</p>\\\\n<h3>Helpful resources</h3>\\\\n<ul>\\\\n\\\\t<li>📝 <a href="<https://portal.ckeditor.com/checkout?plan=free>">Trial sign up</a>,</li>\\\\n\\\\t<li>📕 <a href="<https://ckeditor.com/docs/ckeditor5/latest/installation/index.html>">Documentation</a>,</li>\\\\n\\\\t<li>⭐️ <a href="<https://github.com/ckeditor/ckeditor5>">GitHub</a> (star us if you can!),</li>\\\\n\\\\t<li>🏠 <a href="<https://ckeditor.com>">CKEditor Homepage</a>,</li>\\\\n\\\\t<li>🧑‍💻 <a href="<https://ckeditor.com/ckeditor-5/demo/>">CKEditor 5 Demos</a>,</li>\\\\n</ul>\\\\n<h3>Need help?</h3>\\\\n<p>\\\\n\\\\tSee this text, but the editor is not starting up? Check the browser\\\\'s\\\\n\\\\tconsole for clues and guidance. It may be related to an incorrect license\\\\n\\\\tkey if you use premium features or another feature-related requirement. If\\\\n\\\\tyou cannot make it work, file a GitHub issue, and we will help as soon as\\\\n\\\\tpossible!\\\\n</p>\\\\n',
                licenseKey: LICENSE_KEY,
                placeholder: 'Type or paste your content here!'
            }
        };
    }, [cloud, isLayoutReady]);

    return (
        <div className="main-container">
            <div className="editor-container editor-container_classic-editor" ref={editorContainerRef}>
                <div className="editor-container__editor">
                    <div ref={editorRef}>{ClassicEditor && editorConfig && <CKEditor editor={ClassicEditor} config={editorConfig} />}</div>
                </div>
            </div>
        </div>
    );
}

Step 5: Adjust Astro for Preact Compatibility

To make React libraries (like CKEditor 5 integration package) work in a Preact environment, update your astro.config.mjs file as follows:

import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  integrations: [preact()],
  vite: {
    resolve: {
      alias: {
        react: 'preact/compat',
        'react-dom': 'preact/compat',
      },
    },
  },
});

Step 6: Add the Editor to Your Page

Finally, import the Editor component in your Astro page and render it using the client:only="preact" directive:

---
import Layout from '../layouts/Layout.astro';
import Editor from '../components/editor';
---

<Layout>
  <Editor client:only="preact" />
</Layout>

Once completed, you will be able to see the editor on the page:

Wrapping Up

Congratulations! You’ve successfully set up an Astro + Preact project and integrated CKEditor 5 into it. Here’s a quick recap of the key benefits of the created setup:

• Minimal JavaScript Thanks to Preact: Preact keeps your application lightweight by reducing the shipped JavaScript, resulting in faster load times and improved performance, especially on content-focused websites.
• Powerful React Compatibility: Since Preact is compatible with most React libraries and components, you can easily integrate React libraries while benefiting from Preact’s smaller footprint.
• Great Developer Experience: Astro’s flexibility and Preact’s simplicity allow for a scalable setup with reusable components, making development more efficient and easier to maintain.
• Powerful Editing Tool: CKEditor 5 enhances content creation with rich text formatting, real-time collaboration, media embedding, and an extensive plugin ecosystem, giving users a professional-grade editing experience.

This setup offers incredible performance while maintaining a great developer experience.

If you’d like to extend your CKEditor setup, check out the following resources:

• CKEditor demo pages to get inspiration
• CKEditor 5 features to get a high-level understanding of what is available with CKEditor
• CKEditor Documentation to go deeper and see how you can customize not only the editor setup but also the plugin's behavior

Let us know in the comments what plugins or configurations you’ve used! 🚀

Comments

[Peter Vivo]

What is the build package size?