✍️ ArticWriter

ArticWriter is a ⚡ powerful block-based article editor with an integrated HTML renderer. Write your content with flexible blocks, customize your tools, and render clean HTML — all from a single package.

Version 0.1.0 Changelog:

• Removed built-in block type dependence
• Added Block Based configuration
• Added Flag Section Title as Table of Content option (Spacial)
• Plugin usage made easier
• TypeCasting made more Editor Friendly

🌐 Demo

Checkout Demo of articwriter

🚀 Features

• 🧱 Block-based article writing
• ✨ Inline tools support
• 🧩 Custom editor block plugins
• 🔧 Inline tool plugins
• 🎨 Renderer block plugins
• 🎨 Per-block Style Customization (renderer)
• 🌙 Dark Mode supported
• ⚛️ Optimized for React projects

🖼️ Preview

Editor and Renderer side by side:

📦 Installation

Using npm:

# using npm
npm install articwriter

# using yarn
yarn add articwriter

📁 Package Structure

articwriter/
├── editor     # The full-featured editor
└── renderer   # HTML renderer for the written content

• editor → Used to create and manage blocks
• renderer → Used to render the saved content

📌 The root package does not export anything directly.

🔧 Examples

Editor

import Editor from "articwriter/editor";

const [Component, save] = Editor({
    config: {
        uploadImage: async (file) => {
            return `file_url.png`;
        },
    },
});

return (
    <>
        <Component />
        <button
            onClick={async () => {
                const data = await save();
                console.log(data);
            }}
        >
            Save
        </button>
    </>
);

Renderer

import Renderer from "articwriter/renderer";

const [Component] = Renderer({
    // config
});

return <Component blocks={blocks} />;

⚙️ Configurations

Editor

| Prop | Type | Description | | ------------ | ------------ | -------------------------------------------- | | blocks | List | Initial blocks data to load in the editor | | defaultBlock | string | Default block type (e.g. "paragraph") | | plugins | List | Editor plugin which follows the Plugin Rules | | config | UserConfig | Config options (see below) |

UserConfig:

| Key | Type | Description | | --------------------- | -------------------------------------------------------------- | ---------------------------------------------------- | | uploadImage | (file: File) => Promise<string> | Async function to upload images, returning image URL | | enableTableOfContents | boolean | Turns on Flag section title as Table of Content | | blocks | { [type]: { inlineToolbar?: boolean, defaultTag?: string } } | Add Block based Configurations |

Renderer

| Prop | Type | Description | | ------- | ------------ | ---------------------------------------------- | | plugins | List | Renderer plugin which follows the Plugin Rules | | config | UserConfig | Config options (see below) |

UserConfig:

| Key | Type | Description | | --------- | ----------------------------------------------------- | ------------------------------------------------------------------ | | blockName | { className?: string; style?: React.CSSProperties } | Styles for each block type. Use lowercase names (e.g. paragraph) |

🔧 Built-in blocks

| Block Name | Usage Name (lowercase) | | ----------- | ---------------------- | | Paragraph | paragraph | | Heading | heading | | List | list | | Table | table | | Divider | divider | | Code | code | | Quote | quote | | Image | image | | HTMLPreview | html-preview |

🛠️ Tech Stack

• 🧑‍💻 Built with React + Tailwind CSS
• 🔁 Compatible with all React versions (React 18+ recommended)
• 📦 No external framework dependencies

📜 License

MIT License @TheProjectsX