https://github.com/craftile/editor
A modern, extensible block-based page editor. Perfect for building shopify-like theme customizers, page builders, and structured content editing systems.
https://github.com/craftile/editor
block-editor cms content-management drag-and-drop ecommerce javascript landing-page-builder page-builder shopify theme-customizer typescript visual-editor vue wysiwyg-editor
Last synced: 17 days ago
JSON representation
A modern, extensible block-based page editor. Perfect for building shopify-like theme customizers, page builders, and structured content editing systems.
- Host: GitHub
- URL: https://github.com/craftile/editor
- Owner: craftile
- License: mit
- Created: 2025-09-11T21:24:22.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2026-05-25T16:42:36.000Z (26 days ago)
- Last Synced: 2026-05-25T18:11:18.758Z (26 days ago)
- Topics: block-editor, cms, content-management, drag-and-drop, ecommerce, javascript, landing-page-builder, page-builder, shopify, theme-customizer, typescript, visual-editor, vue, wysiwyg-editor
- Language: TypeScript
- Homepage:
- Size: 794 KB
- Stars: 11
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Craftile Editor
**A modern, extensible block-based page editor for the web**
[](https://www.npmjs.com/package/@craftile/editor)
[](https://github.com/craftile/editor/blob/main/LICENSE)
## ✨ Features
- 🧱 **Block-based editing** - Compose pages from reusable, configurable blocks
- ⚡ **Real-time preview** - See changes instantly with live preview iframe
- 🔌 **Plugin system** - Extend with custom blocks and UI components
- 📦 **Framework agnostic** - JSON output works with any frontend framework
## 🚀 Quick Start
### Installation
```bash
npm install @craftile/editor
```
### Basic Usage
```typescript
import { createCraftileEditor } from '@craftile/editor';
const editor = createCraftileEditor({
el: '#app',
blockSchemas: [
{
type: 'text',
properties: [
{ id: 'content', type: 'text', label: 'Content', default: 'Enter text...' },
{
id: 'fontSize',
type: 'radio',
label: 'Font Size',
default: 'md',
options: [
{ value: 'sm', label: 'Small' },
{ value: 'md', label: 'Medium' },
{ value: 'lg', label: 'Large' },
{ value: 'xl', label: 'Extra Large' },
],
},
{ id: 'color', type: 'color', label: 'Color', default: '#000000' },
],
accepts: [],
meta: {
name: 'Text',
icon: '',
category: 'Content',
description: 'Display text content with customizable styling',
},
},
{
type: 'button',
properties: [
{ id: 'text', type: 'text', label: 'Button Text', default: 'Click me' },
{ id: 'url', type: 'text', label: 'URL', default: '#' },
{
id: 'style',
type: 'select',
label: 'Style',
default: 'primary',
variant: 'segment',
options: [
{ value: 'primary', label: 'Primary' },
{ value: 'secondary', label: 'Secondary' },
{ value: 'outline', label: 'Outline' },
],
},
{
id: 'size',
type: 'select',
label: 'Size',
default: 'medium',
options: [
{ value: 'small', label: 'Small' },
{ value: 'medium', label: 'Medium' },
{ value: 'large', label: 'Large' },
],
},
],
accepts: [],
meta: {
name: 'Button',
icon: '',
category: 'Interactive',
description: 'Clickable button with customizable text and styling',
},
},
],
});
```
### With Plugins
```typescript
import { createCraftileEditor } from '@craftile/editor';
import CommonPropertiesPlugin from '@craftile/plugin-common-properties';
import StaticBlocksRenderer from '@craftile/plugin-static-blocks-renderer';
const editor = createCraftileEditor({
el: '#app',
blockSchemas: [
/** your block schemas */
],
plugins: [
CommonPropertiesPlugin,
StaticBlocksRenderer({
blockRenderers: {
text: ({ props, editorAttributes }) => {
return `
${props.content || ''}
`;
},
button: ({ props, editorAttributes }) => {
return `
${props.text || 'Button'}
`;
},
},
scripts: ['https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'],
}),
],
initialPage: {
blocks: {
'welcome-text': {
id: 'welcome-text',
type: 'text',
properties: {
content: 'Welcome to Craftile Editor!',
fontSize: 'lg',
color: '#1f2937',
},
children: [],
},
},
regions: [
{
name: 'main',
blocks: ['welcome-text'],
},
],
},
});
```
## 🔌 Official Plugins
- **@craftile/plugin-common-properties** - Common property field types (text, color, range, etc.)
- **@craftile/plugin-static-blocks-renderer** - static html blocks renderer
## 📁 Directory Structure
```
craftile-editor/
├── packages/ # Core packages
│ ├── core/ # Framework-agnostic editor engine
│ ├── editor/ # Vue.js-based editor UI
│ ├── types/ # Shared TypeScript definitions
│ ├── event-bus/ # Generic event bus utility
│ ├── messenger/ # Window.postMessage wrapper
│ ├── preview-client/ # Browser client for preview iframe
│ └── preview-client-html/ # HTML preview client for static rendering
├── plugins/ # Official plugins
│ ├── common-properties/ # Common property field types
│ └── static-blocks-renderer/ # Static HTML block rendering
```
## 🤝 Contributing
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
1. Fork the repository
2. Create a feature branch: `git checkout -b feature/amazing-feature`
3. Commit changes: `git commit -m 'Add amazing feature'`
4. Push to branch: `git push origin feature/amazing-feature`
5. Open a Pull Request
## 📄 License
MIT © [Craftile Team](https://github.com/craftile)
---
Made with ❤️ by the Craftile community