A note-taking app in Bubble uses a Note Data Type with rich text content, folders for organization, and tags for cross-cutting categorization. You build a sidebar with folder navigation, a note editor using a Rich Text Editor element, implement auto-save with a timed workflow, add full-text search across notes, and enable sharing notes with other users. This covers the complete app from organization to collaboration.
Overview: Building a Note-Taking App in Bubble
This tutorial guides you through creating a note-taking application with rich text editing, organizational features, and collaboration capabilities.
Prerequisites
- A Bubble app with user authentication
- Understanding of Repeating Groups and custom states
- Rich Text Editor plugin installed (or plan to use the built-in Rich Text Input)
Step-by-step guide
Create the note-taking Data Types
Create the note-taking Data Types
In the Data tab, create 'Note' with: 'title' (text), 'content' (text — stores HTML from rich text editor), 'folder' (Folder), 'tags' (list of text), 'owner' (User), 'shared_with' (list of Users), 'is_pinned' (yes/no), 'is_archived' (yes/no), 'last_modified' (date). Create 'Folder' with: 'name' (text), 'owner' (User), 'parent_folder' (Folder — for nesting), 'color' (text).
Expected result: Data Types for notes and folders are created with fields for content, organization, and sharing.
Build the sidebar with folder navigation
Build the sidebar with folder navigation
Create a split-screen layout. The left sidebar (250px wide) shows: a 'New Note' button at the top, then a Repeating Group of Folders (owner = Current User). Each folder row shows the folder name with a color dot and a count of notes inside. Below folders, add an 'All Notes' option and a 'Shared With Me' option. Clicking a folder sets a page custom state 'active_folder' which filters the note list.
Expected result: A sidebar displays folders with note counts, allowing navigation between different note collections.
Build the note list and editor panes
Build the note list and editor panes
In the middle pane, add a Repeating Group of Notes filtered by the active folder (or all notes if no folder selected). Show title, first line of content (stripped of HTML), and last modified date. Clicking a note sets a 'selected_note' custom state. In the right pane, display the Rich Text Editor (or Rich Text Input element) with the selected note's content. Add a text input for the title above the editor.
Pro tip: Use the Bubble Rich Text Input element for basic formatting, or install the Quill or TinyMCE plugin from the marketplace for advanced features like images, tables, and code blocks.
Expected result: A three-pane layout shows folders, note list, and the note editor with rich text formatting.
Implement auto-save with a timed workflow
Implement auto-save with a timed workflow
Add a 'Do every 5 seconds' workflow event on the note editor page. The workflow: Only when the editor's content has changed (compare against a 'last_saved_content' custom state), make changes to the selected note — set content to the editor's value, title to the title input, and last_modified to Current date/time. Update the 'last_saved_content' state. Show a subtle 'Saved' indicator that fades after 2 seconds.
Expected result: Notes auto-save every 5 seconds when changes are detected, with a visual save indicator.
Add search across all notes
Add search across all notes
At the top of the note list pane, add a search input. When the user types, filter the notes Repeating Group with a constraint: 'content contains [search input]' or 'title contains [search input]'. Use 'Ignore empty constraints' so an empty search shows all notes. For better search, strip HTML tags from content before comparing by using ':find & replace' to remove common tags.
Expected result: Users can search across all their notes by title or content with real-time filtering.
Enable note sharing between users
Enable note sharing between users
Add a 'Share' button on each note. When clicked, show a popup with a user search field (Search Box element searching Users by email). Add a 'Share' button that adds the selected user to the note's 'shared_with' list. Shared users see the note in their 'Shared With Me' section. Set Privacy Rules: allow viewing notes where Current User is in shared_with OR is the owner. Optionally add permission levels (view-only vs edit) with a SharedPermission Data Type.
Expected result: Notes can be shared with other users who see them in their shared section, with appropriate access controls.
Complete working example
1NOTE-TAKING APP — WORKFLOW SUMMARY2=====================================34DATA TYPES:5 Note: title, content (HTML), folder, tags (list),6 owner (User), shared_with (list of Users),7 is_pinned, is_archived, last_modified8 Folder: name, owner (User), parent_folder, color910LAYOUT:11 Left: Folders sidebar (250px)12 Middle: Note list (300px)13 Right: Rich text editor (remaining)1415AUTO-SAVE:16 Do every 5 seconds:17 When content changed:18 Make changes to note (content, title, last_modified)19 Show 'Saved' indicator2021SEARCH:22 Filter notes where title/content contains search text23 Ignore empty constraints for full list2425SHARING:26 Share button → search user by email27 Add to shared_with list28 Privacy Rules: view when owner or in shared_with2930FOLDER NAVIGATION:31 Click folder → set active_folder state32 Filter notes by folder33 All Notes / Shared With Me special viewsCommon mistakes when building a Note-Taking App in Bubble
Why it's a problem: Storing plain text instead of HTML from the rich text editor
How to avoid: Use a text field that stores the full HTML output from the Rich Text Editor
Why it's a problem: Auto-saving every second instead of every 5 seconds
How to avoid: Use a 5-second interval and only save when content has actually changed since the last save
Why it's a problem: Not setting Privacy Rules for shared notes
How to avoid: Set Privacy Rules: allow access only when Current User is the owner OR is in the shared_with list
Best practices
- Auto-save at 5-second intervals with change detection to balance responsiveness and WU cost
- Store rich text as HTML for full formatting preservation
- Use Privacy Rules to enforce note access permissions server-side
- Provide both folder and tag organization for flexible categorization
- Show a 'Saved' indicator to reassure users their work is preserved
- Strip HTML tags when searching content for more accurate text matching
- Add a 'Recently Deleted' folder with 30-day retention before permanent deletion
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a note-taking app in Bubble.io with rich text editing, folders, tags, auto-save, full-text search, and note sharing. What Data Types, pages, and workflows do I need?
Build a note-taking app with a three-pane layout: folders sidebar, note list, and rich text editor. Create Note and Folder data types. Implement auto-save every 5 seconds. Add search across notes and sharing with other users.
Frequently asked questions
Which rich text editor plugin should I use?
Bubble's built-in Rich Text Input works for basic formatting. For advanced features like tables, code blocks, and image embedding, use the TinyMCE or Quill plugin from the marketplace.
Can I export notes as PDF or Markdown?
For PDF, use a PDF generation plugin or service that converts the HTML content. For Markdown, you would need a backend conversion step or a JavaScript library to convert HTML to Markdown.
How do I handle offline note editing?
Bubble does not support offline functionality natively. Consider using localStorage via JavaScript to cache the current note and sync when connectivity returns.
Can I add version history for individual notes?
Yes. Create a NoteVersion Data Type that stores snapshots of the note content with timestamps. Before each auto-save, create a new NoteVersion. Let users browse and restore previous versions.
Can RapidDev build a knowledge management system in Bubble?
Yes. RapidDev can build note-taking, documentation, wiki, and knowledge base systems with collaboration, search, and organization features in Bubble.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation