{"id":30134738,"url":"https://github.com/theprojectsx/articwriter","last_synced_at":"2026-01-20T17:02:34.006Z","repository":{"id":307721740,"uuid":"1030471082","full_name":"TheProjectsX/articwriter","owner":"TheProjectsX","description":"A block based Article Writer component with Built-in Renderer (TSX)","archived":false,"fork":false,"pushed_at":"2025-09-05T16:01:54.000Z","size":3703,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-05T20:18:43.904Z","etag":null,"topics":["editor","nextjs","reactjs","tailwindcss","typescript","wysiwyg"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/articwriter","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheProjectsX.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-01T17:39:54.000Z","updated_at":"2025-09-05T16:01:57.000Z","dependencies_parsed_at":"2025-08-01T20:50:09.230Z","dependency_job_id":"c51cb5f0-3c88-42b6-b1a4-31dbfe5ee89d","html_url":"https://github.com/TheProjectsX/articwriter","commit_stats":null,"previous_names":["theprojectsx/articwriter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TheProjectsX/articwriter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheProjectsX%2Farticwriter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheProjectsX%2Farticwriter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheProjectsX%2Farticwriter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheProjectsX%2Farticwriter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheProjectsX","download_url":"https://codeload.github.com/TheProjectsX/articwriter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheProjectsX%2Farticwriter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28607624,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T16:10:39.856Z","status":"ssl_error","status_checked_at":"2026-01-20T16:10:39.493Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","nextjs","reactjs","tailwindcss","typescript","wysiwyg"],"created_at":"2025-08-10T21:35:35.331Z","updated_at":"2026-01-20T17:02:33.994Z","avatar_url":"https://github.com/TheProjectsX.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✍️ ArticWriter\n\n**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.\n\n---\n\n## Version 0.1.0 Changelog:\n\n-   Removed built-in block type dependence\n-   Added Block Based configuration\n-   Added `Flag Section Title as Table of Content` option (**Spacial**)\n-   Plugin usage made easier\n-   TypeCasting made more Editor Friendly\n\n## 🌐 Demo\n\nCheckout [Demo of articwriter](https://modasser.is-a.dev/articwriter/)\n\n---\n\n## 🚀 Features\n\n-   🧱 **Block-based article writing**\n-   ✨ **Inline tools** support\n-   🧩 **Custom editor block plugins**\n-   🔧 **Inline tool plugins**\n-   🎨 **Renderer block plugins**\n-   🎨 **Per-block Style Customization (renderer)**\n-   🌙 **Dark Mode** supported\n-   ⚛️ **Optimized for React projects**\n\n---\n\n## 🖼️ Preview\n\nEditor and Renderer side by side:\n![Editor \u0026 Renderer](./assets/articwriter.jpg)\n\n## 📦 Installation\n\nUsing **npm**:\n\n```bash\n# using npm\nnpm install articwriter\n\n# using yarn\nyarn add articwriter\n```\n\n---\n\n## 📁 Package Structure\n\n```bash\narticwriter/\n├── editor     # The full-featured editor\n└── renderer   # HTML renderer for the written content\n```\n\n-   `editor` → Used to create and manage blocks\n-   `renderer` → Used to render the saved content\n\n\u003e 📌 The root package does not export anything directly.\n\n---\n\n## 🔧 Examples\n\n### Editor\n\n```jsx\nimport Editor from \"articwriter/editor\";\n\nconst [Component, save] = Editor({\n    config: {\n        uploadImage: async (file) =\u003e {\n            return `file_url.png`;\n        },\n    },\n});\n\nreturn (\n    \u003c\u003e\n        \u003cComponent /\u003e\n        \u003cbutton\n            onClick={async () =\u003e {\n                const data = await save();\n                console.log(data);\n            }}\n        \u003e\n            Save\n        \u003c/button\u003e\n    \u003c/\u003e\n);\n```\n\n### Renderer\n\n```jsx\nimport Renderer from \"articwriter/renderer\";\n\nconst [Component] = Renderer({\n    // config\n});\n\nreturn \u003cComponent blocks={blocks} /\u003e;\n```\n\n---\n\n## ⚙️ Configurations\n\n### Editor\n\n| Prop         | Type         | Description                                  |\n| ------------ | ------------ | -------------------------------------------- |\n| blocks       | `List`       | Initial blocks data to load in the editor    |\n| defaultBlock | `string`     | Default block type (e.g. `\"paragraph\"`)      |\n| plugins      | `List`       | Editor plugin which follows the Plugin Rules |\n| config       | `UserConfig` | Config options (see below)                   |\n\n#### `UserConfig`:\n\n| Key                   | Type                                                           | Description                                          |\n| --------------------- | -------------------------------------------------------------- | ---------------------------------------------------- |\n| uploadImage           | `(file: File) =\u003e Promise\u003cstring\u003e`                              | Async function to upload images, returning image URL |\n| enableTableOfContents | `boolean`                                                      | Turns on `Flag section title as Table of Content`    |\n| blocks                | `{ [type]: { inlineToolbar?: boolean, defaultTag?: string } }` | Add Block based Configurations                       |\n\n### Renderer\n\n| Prop    | Type         | Description                                    |\n| ------- | ------------ | ---------------------------------------------- |\n| plugins | `List`       | Renderer plugin which follows the Plugin Rules |\n| config  | `UserConfig` | Config options (see below)                     |\n\n#### `UserConfig`:\n\n| Key       | Type                                                  | Description                                                        |\n| --------- | ----------------------------------------------------- | ------------------------------------------------------------------ |\n| blockName | `{ className?: string; style?: React.CSSProperties }` | Styles for each block type. Use lowercase names (e.g. `paragraph`) |\n\n---\n\n## 🔧 Built-in blocks\n\n| Block Name  | Usage Name (lowercase) |\n| ----------- | ---------------------- |\n| Paragraph   | `paragraph`            |\n| Heading     | `heading`              |\n| List        | `list`                 |\n| Table       | `table`                |\n| Divider     | `divider`              |\n| Code        | `code`                 |\n| Quote       | `quote`                |\n| Image       | `image`                |\n| HTMLPreview | `html-preview`         |\n\n## 🛠️ Tech Stack\n\n-   🧑‍💻 Built with **React** + **Tailwind CSS**\n-   🔁 Compatible with all React versions (React 18+ recommended)\n-   📦 No external framework dependencies\n\n---\n\n## 📜 License\n\nMIT License @TheProjectsX\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheprojectsx%2Farticwriter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheprojectsx%2Farticwriter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheprojectsx%2Farticwriter/lists"}