---
title: "Care Plan Builder - User Manual"
canonical: "https://wiki.patientsknowbest.com/space/DEPLOY/5081202886/Care%20Plan%20Builder%20-%20User%20Manual"
format: markdown
---
Is currently located at [https://pkb-cp-builder.pages.dev/](https://pkb-cp-builder.pages.dev/)
Care plan doc to MD Gemini Gem is here - [https://gemini.google.com/gem/1a62aM5sA5slGgDPLfMdn3s6QnbENcA8g?usp=sharing](https://gemini.google.com/gem/1a62aM5sA5slGgDPLfMdn3s6QnbENcA8g?usp=sharing) This is a work in progress and you **MUST **review and compare the outputted MD against the original document. The gem will **not **clear out demographic fields etc. but it is a good place to start.
## Thoughts, bugs and improvements
Please list any of the above here so we can improve the builder and make it easier to use and more accessible/useful. Please add to the bug log in the care plan request doc here - [https://docs.google.com/spreadsheets/d/1bLLGGVzWPERREIT_8fcvq28R8QwypwTCIR5k7gFi-gI/edit?usp=sharing](https://docs.google.com/spreadsheets/d/1bLLGGVzWPERREIT_8fcvq28R8QwypwTCIR5k7gFi-gI/edit?usp=sharing)
---
## **Introduction**
**The Care Plan Builder is a visual editor designed to help you create professional, compliant HTML care plan documents. With an intuitive drag-and-drop interface, you can build structured care plans without writing any code.**
### **Key Features**
- **Visual Editor: Drag-and-drop components to build your care plan**
- **Rich Text Formatting: Add bold, italic, and links to your content**
- **Component Library: Pre-built, compliant HTML components**
- **Team Library: Save and share care plans with your team**
- **Import/Export: Import markdown content or export clean HTML**
- **Live Preview: See exactly how your care plan will look**
---
## **Getting Started**
### **Accessing the Application**
**Open your web browser and navigate to http://localhost:8080 (or your deployed URL).**
### **The Blank Canvas**
**When you first open the application, you'll see:**
- **A blank canvas in the center**
- **A component library on the left**
- **An inspector panel on the right (appears when you select an element)**
- **A header with action buttons at the top**
---
## **Interface Overview**
### **Header Bar**
**Located at the top of the screen:**
- **Document Title: Click to edit your care plan's title**
- **Library Button (📁): Access saved care plans**
- **Import Button (📥): Import markdown content**
- **Export Button (💾): Download your care plan as HTML**
### **Component Library (Left Panel)**
**Contains all available components organized by category:**
- **Content: Headings, Paragraphs, Bullet Points**
- **Dividers: Section Dividers, Separators**
- **Inputs: Text fields, Textareas, Date/Time pickers**
- **Selections: Checkboxes, Radio buttons, Dropdowns**
- **Containers: Pro Lock, Collapsible sections, Bordered sections**
- **Media: Images, Videos**
### **Canvas (Center)**
**The main workspace where you build your care plan. Click any element to select it.**
### **Inspector Panel (Right)**
**Appears when you select an element. Shows editable properties for the selected component.**
---
## **Building a Care Plan**
### **Adding Components**
1. **Drag from Library: Click and drag a component from the left panel onto the canvas**
2. **Drop in Position: Release to place the component where you want it**
3. **Reorder: Click and drag the handle (☰) on any component to move it**
4. **Click to Insert: Select a container (e.g., Column, Pro Lock) on the canvas, then click a component in the library. It will automatically be added inside the selected container.**
### **Selecting Components**
- **Click any component on the canvas to select it**
- **Selected components show a blue outline**
- **The Inspector panel displays the component's properties**
### **Deleting Components**
1. **Select the component you want to remove**
2. **Scroll to the bottom of the Inspector panel**
3. **Click the "Delete Component" button**
---
## **Component Library**
### **Content Components**
#### **Heading**
**Creates heading text (H1-H6).**
- **Properties: Content, Heading Level (H1-H6)**
- **Use for: Section titles, subsection headers**
#### **Paragraph**
**Standard text content with rich formatting.**
- **Properties: Content (supports bold, italic, links)**
- **Use for: Main body text, descriptions**
#### **Bullet Point**
**Individual bullet point item.**
- **Properties: Content**
- **Use for: Lists, key points**
### **Dividers**
#### **Section Divider**
**Colored header bar to separate major sections.**
- **Properties: Title, Background Color**
- **Use for: Main section headers**
- **Default Color: Teal (#177289)**
#### **Separator**
**Horizontal line to divide content.**
- **Properties: Height, Background Color, Margins**
- **Use for: Visual breaks between content**
### **Input Components**
#### **Text Input**
**Single-line text field.**
- **Properties: Label, Placeholder, Width, Required**
- **Use for: Names, short answers**
#### **Textarea**
**Multi-line text field.**
- **Properties: Label, Placeholder, Rows, Width**
- **Use for: Notes, longer responses**
#### **Date Input**
**Date picker field.**
- **Properties: Label, Placeholder, Default Value**
- **Use for: Appointment dates, deadlines**
#### **Time Input**
**Time picker field.**
- **Properties: Label, Placeholder**
- **Use for: Appointment times, schedules**
#### **Number Input**
**Numeric input with optional min/max.**
- **Properties: Label, Min, Max, Step, Required**
- **Use for: Quantities, measurements**
### **Selection Components**
#### **Checkbox Group**
**Multiple checkboxes with a group label.**
- **Properties: Label, Options (add/remove/edit)**
- **Use for: Multi-select lists, symptoms checklist**
#### **Radio Group**
**Radio buttons (single selection).**
- **Properties: Label, Options (add/remove/edit)**
- **Use for: Single-choice questions**
#### **Select (Dropdown)**
**Dropdown menu.**
- **Properties: Label, Placeholder, Options**
- **Use for: Long lists, category selection**
### **Container Components**
#### **Pro Lock**
**Yellow-highlighted section for premium content.**
- **Properties: None (container only)**
- **Use for: Premium features, locked content**
- **Note: Can contain other components**
#### **Collapsible Section**
**Expandable/collapsible section with title.**
- **Properties: Title**
- **Use for: Optional information, lengthy content**
- **Note: Can contain other components**
#### **Bordered Section**
**Section with colored border.**
- **Properties: Border Color**
- **Use for: Highlighting important sections**
- **Note: Can contain other components**
#### **Row / Columns**
**Container for multi-column layouts.**
- **Properties: Column Layout (1, 2, 3, or 4 columns)**
- **Use for: Organizing content side-by-side**
- **Note: Drag content into columns to structure your page**
### **Media Components**
#### **Image**
**Embedded image.**
- **Properties: Source URL, Alt Text, Width, Height**
- **Use for: Diagrams, photos**
#### **Video**
**Embedded video (iframe).**
- **Properties: Source URL, Width, Height, Allow Fullscreen**
- **Use for: Tutorial videos, demonstrations**
---
## **Editing Properties**
### **Text Properties**
#### **Rich Text Fields (Content, Labels)**
- **Bold: Select text and click B or use Ctrl+B**
- **Italic: Select text and click I or use Ctrl+I**
- **Link: Select text, click 🔗, enter URL**
- **Remove Formatting: Select text and click ✕**
#### **Plain Text Fields (Placeholders, Titles)**
- **Type directly into the input field**
- **No formatting options available**
### **Color Pickers**
**Available for:**
- **Section Divider: Background Color**
- **Bordered Section: Border Color**
**Color Palette (20 colors):**
- **Reds/Pinks, Oranges/Tans, Greens, Teals/Blues, Purples, Grays**
**To Select a Color:**
1. **Click the component**
2. **Find the color picker in the Inspector**
3. **Click any color circle to apply it**
### **Managing Options (Checkboxes, Radio, Select)**
1. **Select the component**
2. **In the Inspector, find the "Options" section**
3. **Add Option: Click "+ Add Option"**
4. **Edit Option:**
- **Label: What users see**
- **Value: Internal value (used in HTML)**
5. **Remove Option: Click the ✕ button**
6. **Reorder: Options appear in the order you create them**
### **Heading Levels**
1. **Select a heading component**
2. **In the Inspector, find "Heading Level"**
3. **Choose from dropdown:**
- **H1 - Main Title (largest)**
- **H2 - Section**
- **H3 - Subsection**
- **H4 - Minor Heading**
- **H5 - Small Heading**
- **H6 - Tiny Heading (smallest)**
---
## **Working with the Library**
### **Saving a Care Plan**
1. **Build your care plan on the canvas**
2. **Click the Library button (📁) in the header**
3. **Click "Save to Library"**
4. **Your plan is automatically saved with:**
- **Current document title**
- **Current timestamp**
- **Your username (if configured)**
### **Loading a Care Plan**
1. **Click the Library button (📁)**
2. **Browse your saved plans**
3. **Click "Load" on the plan you want to open**
4. **Your current work will be replaced (save first if needed!)**
### **Deleting a Care Plan**
1. **Click the Library button (📁)**
2. **Find the plan you want to delete**
3. **Click "Delete"**
4. **Confirm the deletion**
**Note: The library is shared with your team. All users can access saved plans.**
---
## **Importing Content**
### **Supported Format**
**The importer accepts Markdown with special shortcodes for interactive components.**
### **How to Import**
1. **Click the Import button (📥) in the header**
2. **Paste your markdown content into the text area**
3. **Click "Import"**
4. **Your content will be converted to components on the canvas**
### **Markdown Syntax**
#### **Basic Markdown**
```
# Heading Level 1
## Heading Level 2
### Heading Level 3
This is a paragraph with **bold** and *italic* text.
You can also add [links](https://example.com).
- Bullet point 1
- Bullet point 2
---
(Horizontal separator)
```
#### **Component Shortcodes**
**Text Input:**
```
[[text_input]] Enter your name
```
**Textarea:**
```
[[textarea]] Additional notes
```
**Date Input:**
```
[[date_input]] Appointment date
```
**Time Input:**
```
[[time_input]] Appointment time
```
**Number Input:**
```
[[number_input]] Age
```
**Section Divider:**
```
[[section_divider]] Section Title
```
**Radio Group:**
```
[[radio_group]] Select one option
- ( ) Option 1
- ( ) Option 2
- ( ) Option 3
```
**Checkbox Group:**
```
[[checkbox_group]] Select all that apply
- [ ] Option 1
- [ ] Option 2
- [ ] Option 3
```
**Select Dropdown:**
```
[[select]] Choose a category
[[select_option]] Category A
[[select_option]] Category B
[[select_option]] Category C
```
**Containers:**
```
::: pro_lock
Content inside pro lock
:::
::: collapsible | title="Click to expand"
Hidden content
:::
::: bordered_section
Content with border
:::
```
### **Import Reference**
**For a complete import reference with examples, see import_reference.md in the project folder.**
---
## **Exporting Your Care Plan**
### **Export as HTML**
1. **Click the Export button (💾) in the header**
2. **A file named care-plan.html will download to your computer**
3. **The HTML file contains:**
- **Clean, compliant HTML structure**
- **All your content and formatting**
- **Special characters encoded as decimal entities**
- **Inline styles for colours**
---
## **Tips and Best Practices**
### **Planning Your Care Plan**
1. **Start with Structure: Add section dividers first to organize your plan**
2. **Use Headings: Create a clear hierarchy with H1, H2, H3 headings**
3. **Group Related Content: Use bordered sections or collapsible sections for related information**
4. **Test Inputs: Add placeholder text to show users what to enter**
### **Formatting Text**
1. **Be Consistent: Use the same formatting style throughout**
2. **Use Bold Sparingly: Only for important terms or headings**
3. **Add Links: Link to resources, policies, or related documents**
4. **Keep It Readable: Avoid excessive formatting**
### **Working with Colours**
1. **Section Dividers: Use consistent colours for similar section types**
2. **Bordered Sections: Use colours to indicate importance or category**
- **Red/Pink: Urgent or critical**
- **Yellow/Orange: Warnings or cautions**
- **Green: Success or completed**
- **Blue/Teal: Information**
- **Purple: Special notes**
### **Managing Options**
1. **Clear Labels: Make option labels descriptive and unambiguous**
2. **Logical Order: Arrange options in a logical sequence (alphabetical, chronological, etc.)**
3. **Limit Choices: Too many options can be overwhelming (consider grouping)**
### **Using Containers**
1. **Pro Lock: Reserve for truly premium content**
2. **Collapsible: Use for optional or detailed information that might clutter the page**
3. **Bordered Sections: Highlight important sections or group related fields**
4. **Columns: Use rows to create 2, 3, or 4 column layouts for compact data entry (e.g., Dates and Times side-by-side)**
### **Saving and Versioning**
1. **Save Often: Click "Save to Library" regularly**
2. **Use Descriptive Titles: Name your care plans clearly (e.g., "Diabetes Management Plan v2")**
3. **Version Numbers: Include version numbers in titles for tracking changes**
4. **Test Before Sharing: Load your saved plan to verify it saved correctly**
### **Importing Content**
1. **Start Simple: Test with a small markdown file first**
2. **Check Syntax: Ensure your shortcodes are formatted correctly**
3. **Review After Import: Always review imported content for accuracy**
4. **Edit in Builder: Use the visual editor to refine imported content**
---
## **Troubleshooting**
### **Component Won't Drag**
- **Ensure you're clicking and holding on the component name**
- **Try refreshing the page if the interface seems frozen**
### **Can't Edit Text**
- **Make sure the component is selected (blue outline)**
- **Check that you're clicking in the text editor area in the Inspector**
### **Colours Not Showing**
- **Verify the component supports colours (Section Divider, Bordered Section)**
- **Try selecting a different colour**
- **Refresh the page and try again**
### **Import Not Working**
- **Check your markdown syntax carefully**
- **Ensure shortcodes are spelled correctly with double brackets [[shortcode]]**
- **Try importing a smaller section to isolate the issue**
### **Export File Empty**
- **Ensure you have components on the canvas**
- **Try adding a simple heading and exporting again**
- **Check your browser's download settings**
### **Library Not Saving**
- **Verify the backend service is running**
- **Check your network connection**
- **Try saving a simple plan with just a heading**
---
## **Keyboard Shortcuts**
### **Text Editing**
- **Ctrl+B (Cmd+B on Mac): Bold**
- **Ctrl+I (Cmd+I on Mac): Italic**
- **Ctrl+K (Cmd+K on Mac): Add link**
### **General**
- **Click: Select component**
- **Drag: Move component**
- **Delete Key: Remove selected component (when Inspector is focused)**
---
## **Support and Resources**
### **Getting Help**
**If you encounter issues:**
1. **Check this manual for guidance**
2. **Review the import reference for syntax**
3. **Verify the backend service is running**
4. **Check browser console for error messages**
5. **Reach out to the ****[slack channel](https://patientsknowbest.slack.com/archives/C0A598QFZLY)**
---
## **Appendix: Component Quick Reference**
| **Component** | **Type** | **Key Properties** | **Best For** |
| --- | --- | --- | --- |
| **Heading** | **Content** | **Content, Level** | **Section titles** |
| **Paragraph** | **Content** | **Content** | **Body text** |
| **Bullet Point** | **Content** | **Content** | **Lists** |
| **Section Divider** | **Divider** | **Title, BG Colour** | **Major sections** |
| **Separator** | **Divider** | **Height, Colour** | **Visual breaks** |
| **Text Input** | **Input** | **Label, Placeholder** | **Short text** |
| **Textarea** | **Input** | **Label, Rows** | **Long text** |
| **Date Input** | **Input** | **Label** | **Dates** |
| **Time Input** | **Input** | **Label** | **Times** |
| **Number Input** | **Input** | **Label, Min/Max** | **Numbers** |
| **Checkbox Group** | **Selection** | **Label, Options** | **Multi-select** |
| **Radio Group** | **Selection** | **Label, Options** | **Single-select** |
| **Select** | **Selection** | **Label, Options** | **Dropdowns** |
| **Pro Lock** | **Container** | **None** | **Premium content** |
| **Collapsible** | **Container** | **Title** | **Expandable sections** |
| **Bordered Section** | **Container** | **Border Colour** | **Highlighted areas** |
| **Image** | **Media** | **Source, Alt** | **Pictures** |
| **Video** | **Media** | **Source** | **Videos** |
| **Row / Columns** | **Container** | **Layout (1-4 cols)** | **Side-by-side layout** |
---
## Mark Down Reference
```
# Heading Level 1
## Heading Level 2
### Heading Level 3
#### Heading Level 4
##### Heading Level 5
###### Heading Level 6
[[section_divider]] This following text is the text for the label
This is a standard paragraph. It can contain text and will be imported as a paragraph block.
You can also use bold, italic, and links using HTML tags.
- Bullet point 1
- Bullet point 2
- Bullet point 3
[[radio_group]] This following text is the text for the label
- ( ) Radio option 1
- ( ) Radio option 2
- ( ) Radio option 3
[[checkbox_group]] This following text is the text for the label
- [ ] Checkbox option 1
- [ ] Checkbox option 2
- [ ] Checkbox option 3
[[select]] This following text is the text for the label
[[select_option]] This following text is the text for the option
[[select_option]] This following text is the text for the option
[[text_input]] This label has bold text
[[textarea]] This following text is the text for the label
[[date_input]] This following text is the text for the label
[[time_input]] This following text is the text for the label
[[number_input]] This following text is the text for the label
::: pro_lock
:::
::: collapsible | title="REPLACE_ME"
:::
::: bordered_section
:::
::: row
::: column
Content for column 1
:::
::: column
Content for column 2
:::
:::
```
**Version**: 1.3
**Last Updated**: December 2025