/
Care Plan Builder - User Manual

Patients Know Best Resource Hub | Deploy | Developer | Trust Centre | Manual | Research | Education | Release Notes

Care Plan Builder - User Manual

Is currently located at https://pkb-cp-builder.pages.dev/

Care plan doc to MD Gemini Gem is here - 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/

  • Search function in the care plan library

  • Improve the drop zones of the containers.

  • The select input will always have Please select.. as the first option

  • Add Underline to the text decoration

  • Use MD for bold in the MD doc rather than strong etc

  • Do we need an export mark down to edit the care plan as MD?

  • When clicking the upload MD/HTML have the input box already active so you just need to paste

  • hrefs must have  target="_blank"

  • When saving check if it exists and warn the user.

  • Ad a tag system for trusts and teams.

  • Add rows and Columns element

  • Add placeholder option and input box.

  • An option where the selected element will go straight into a selected container.

  • Show the outline of an input box to visually see the label and box combo

  • Duplicate Containiners containing several Structure and Form Input components.

  • Improve the stability and fix crashes when rearranging bullet points within columns (including dragging from a from and dropping bullet points back onto the canvas).

  • MD import is not complying with nested containers

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

Appendix: Component Quick Reference

Component

Type

Key Properties

Best For

Component

Type

Key Properties

Best For

Heading

Content

Content, Level

Section titles

Paragraph

Patients Know Best Resource Hub | Deploy | Developer | Trust Centre | Manual | Research | Education | Release Notes

© Patients Know Best, Ltd. Registered in England and Wales Number: 6517382. VAT Number: GB 944 9739 67.