A React-based tool for transforming plain text and Word content into beautifully formatted, accessible learning materials with interactive design components.
Bugs and all, I'm adding this to GitHub in case other people can take it and improve upon it. I've had this idea for years that I'd like to build some sort of speed-boosting app for formatting learning material for Moodle, but I've never had the time or brain power. Finally, with LLMs becoming popular, I was able to rapidly generate an app and then perform several iterations to smooth things out. I realise this is not a perfect app, but it doesn't have to be at this point. The aim is really just to help a learning designer paste in ready-to-go content from Word Docs (as they chunk it) and apply some interactive formatting as quick as possible (then creating LMS artefacts like Moodle Book). The styling is based on my institution's branding, but the app could be customised to parameterise much of this. Cheers, Rolley
Transform educational content with intelligent formatting suggestions
- Automatically detects and suggests appropriate design components based on content
- Identifies learning objectives, summaries, exercises, and more
- NLP-powered reading level analysis and word count statistics
- Headings & Titles: Module titles and styled headings
- Learning Outcomes: Numbered objective lists with custom styling
- Callout Boxes: Info, summary, exercise, and resource boxes
- Lists: Bullet, numeric, alphabetic, and icon lists with indentation support
- Advanced Layouts: Accordions, carousels, tabs, and stylised content boxes
- Text Columns: Magazine-style accessible column layouts
- Real-time live preview with Bootstrap and Font Awesome integration (compatible with Moodle v4 I think)
- Paste directly from Microsoft Word with some preserved formatting (cleans up html)
- Customisable split points for multi-section components (somewhat buggy)
- List indentation control with visual preview (lists have some bugs)
- Icon and colour customisation for icon lists
- One-click HTML copy-to-clipboard
- Reading time estimation
- Multiple readability scores (Flesch-Kincaid, Gunning Fog, SMOG, Coleman-Liau, ARI)
- Grade level assessment
- Sentence and word complexity analysis
- Node.js (v20 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/ticknerr/content-designer.git
cd content-designer- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser to
http://localhost:5173
-
Input Content: Paste your content from Word into the input area
- Only small changes can be made in the input area
- Formatting (bold, italic, underline, hyperlinks) is preserved
-
Select Blocks: Click on a block or drag to select multiple blocks
-
Apply Components: Choose from the design components panel
- Suggested components appear with a "Suggested" badge
- Some components appear different if a heading is detected
- Preview updates in real-time
-
Customise:
- Use split controls for accordions, tabs, and carousels
- Adjust list indentation levels
- Customise icon lists with different icons and colours
-
Export: Click "Copy HTML" to copy the formatted HTML to your clipboard
Enter: Split a block into two paragraphsCtrl/Cmd + V: Paste content with preserved formatting
- Module Title: Large centred title for module headers
- Styled Heading: Formatted heading with proper styling
- Learning Outcomes: Automatically formats objectives with numbered circles
- Info Box: Blue informational callout (with optional title)
- Summary Box: Grey summary callout (with optional title)
- Exercise Box: Purple exercise/question box (with optional title)
- Resource Box: Teal resource/link box (with optional title)
- Icon List: Customisable Font Awesome icons with colour options
- Numbered List: Styled numbered list with circular backgrounds
- Bullet List: Standard bullet points
- Alpha List: Alphabetical list (a, b, c...)
- Numeric List: Standard numbered list (1, 2, 3...)
All lists support nested indentation up to 3 levels.
- Accordion: Expandable sections (auto-groups by headings)
- Carousel: Slideshow with navigation controls
- Tabs: Tabbed content sections
- Stylised Content Box: Flexible multi-column layout
- Text Columns: Magazine-style word-wrapping columns
content-designer/
├── components/ # React components
│ ├── TextInput.jsx # Main content editor
│ ├── DesignComponentsList.jsx # Component selection
│ ├── LivePreview.jsx # HTML preview
│ ├── SplitControl.jsx # Multi-section grouping
│ ├── ListIndentControl.jsx # List indentation
│ ├── IconListCustomisation.jsx # Icon customisation
│ ├── NLPAnalysis.jsx # Content analysis
│ └── CopyButton.jsx # HTML export
├── config/ # Configuration
│ ├── htmlTemplates.js # HTML component templates
│ └── theme.js # MUI theme configuration
├── hooks/ # Custom React hooks
│ └── useContentProcessor.js # Content processing logic
├── utils/ # Utility functions
│ ├── contentClassifier.js # AI content suggestions
│ ├── contentGrouper.js # Multi-section grouping
│ ├── htmlGenerator.js # HTML generation
│ ├── htmlUtils.js # HTML manipulation
│ └── textParser.js # Content parsing
└── App.jsx # Main application
- React 18 - UI framework
- Material-UI (MUI) - Component library
- compromise - Natural language processing
- DOMPurify - XSS protection
- Bootstrap 4.5 - Preview styling
- Font Awesome 6 - Icons
- Vite - Build tool
- Chrome/Edge (recommended)
- Firefox
- Safari
Note: The contentEditable features work best in Chromium-based browsers.
npm run buildThe production build will be in the dist/ directory.
The project follows standard React conventions:
- Functional components with hooks
- PropTypes for type checking (future enhancement)
- Modular utility functions
- Separation of concerns between UI and logic
- Content editor requires modern browser with full contentEditable support
- Very large documents (>10,000 words) may experience performance issues, chunk your content as you go and work on it bit by bit
- List detection from plain text is heuristic-based and may need manual adjustment
- Overall, there are a number of bugs, or little wrinkles that have work-arounds
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
- Bootstrap for preview styling
- Font Awesome for icons
- Material-UI team for the component library
- compromise.js for NLP functionality
For issues, questions, or suggestions, please open an issue on GitHub - but be mindful that I know of a lot of bugs already :)
Made with ❤️ for educators and instructional designers