https://github.com/theprojectsx/articwriter
A block based Article Writer component with Built-in Renderer (TSX)
https://github.com/theprojectsx/articwriter
editor nextjs reactjs tailwindcss typescript wysiwyg
Last synced: 5 months ago
JSON representation
A block based Article Writer component with Built-in Renderer (TSX)
- Host: GitHub
- URL: https://github.com/theprojectsx/articwriter
- Owner: TheProjectsX
- License: mit
- Created: 2025-08-01T17:39:54.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-09-05T16:01:54.000Z (10 months ago)
- Last Synced: 2025-10-05T20:18:43.904Z (9 months ago)
- Topics: editor, nextjs, reactjs, tailwindcss, typescript, wysiwyg
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/articwriter
- Size: 3.53 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ✍️ 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](https://modasser.is-a.dev/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**:
```bash
# using npm
npm install articwriter
# using yarn
yarn add articwriter
```
---
## 📁 Package Structure
```bash
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
```jsx
import Editor from "articwriter/editor";
const [Component, save] = Editor({
config: {
uploadImage: async (file) => {
return `file_url.png`;
},
},
});
return (
<>
{
const data = await save();
console.log(data);
}}
>
Save
>
);
```
### Renderer
```jsx
import Renderer from "articwriter/renderer";
const [Component] = Renderer({
// config
});
return ;
```
---
## ⚙️ 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` | 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