Skip to content

README_EN.md

Latest commit

 

History

History
165 lines (113 loc) · 4.22 KB

README_EN.md

File metadata and controls

165 lines (113 loc) · 4.22 KB

🚀 PageSkill

Turn plain Markdown into publication-ready layouts in seconds

A creator-first editor for WeChat, blogs, and social media: write, preview, copy, publish.

PageSkill React TypeScript Vite License

简体中文 | English

PageSkill demo

⚡ Live Demo · 📚 Wiki · 🌟 Star the project

🔥 Why creators choose PageSkill

  • WYSIWYG workflow: write on the left, instantly preview final output on the right.
  • One-click copy: copy formatted content or raw HTML with less manual cleanup.
  • Social-ready export: export high-quality PNG for posts, covers, and share cards.
  • Curated templates: switch visual styles for technical, business, or storytelling content.
  • Open-source and extensible: self-host, customize, and ship your own workflows.

Mission: Spend less time fixing format, and more time creating great content.

✨ Core capabilities

Capability What you get
📝 Live Markdown rendering Immediate visual feedback while writing
🎨 Theme-based layout Consistent style with built-in templates
📋 Copy formatted content / HTML Faster publishing with fewer extra steps
🖼️ Export poster image High-quality PNG output for social platforms
📱 Responsive preview modes Quick checks for desktop / tablet / mobile
🌙 Dark mode More comfortable writing at night

⚡ Quick start (30 seconds)

git clone https://github.com/AIPMAndy/PageSkill.git
cd PageSkill
npm install
npm run dev

Open: http://localhost:5173

🎯 Use cases

  • WeChat article layout and publishing
  • Technical blogging and long-form writing
  • Tutorials, documentation, and learning materials
  • Social media visual content (X, LinkedIn, RED, etc.)

🧰 Tech stack

  • React 18 + TypeScript
  • Vite + Tailwind CSS
  • marked + DOMPurify
  • html2canvas + lucide-react

📂 Project structure

PageSkill/
├── public/
├── src/
│   ├── components/
│   │   ├── Editor/
│   │   ├── Header/
│   │   ├── Poster/
│   │   ├── Preview/
│   │   └── Sidebar/
│   ├── templates/
│   ├── utils/
│   ├── App.tsx
│   ├── index.css
│   └── main.tsx
├── package.json
├── tsconfig.json
└── vite.config.ts

🗺️ Roadmap

  • Live Markdown rendering
  • Copy formatted content / HTML
  • Image export
  • Multi-template support
  • Custom template builder
  • More export formats (e.g., PDF)
  • Team collaboration and cloud sync

🤝 Contributing

Issues and PRs are welcome.

Good first contributions:

  • New templates
  • Editor UX improvements
  • Export quality and compatibility enhancements
  • Documentation and examples

📄 License

Apache-2.0

If PageSkill saves you formatting time, please give it a ⭐

Made with ❤️ by Andy | AI酋长

✅ Project health check (April 4, 2026)

Validated locally:

  • TypeScript check passes: npm run lint
  • Production build passes: npm run build
  • lint:eslint currently fails because the repo does not include ESLint v9 eslint.config.*

Recommended next step: add ESLint v9 flat config to make CI checks fully green.

🧪 Common commands

npm run dev
npm run lint
npm run build
npm run preview