# How to Build a Note-Taking App in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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.

### 6. 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 code example

File: `Workflow summary`

```text
NOTE-TAKING APP — WORKFLOW SUMMARY
=====================================

DATA TYPES:
  Note: title, content (HTML), folder, tags (list),
    owner (User), shared_with (list of Users),
    is_pinned, is_archived, last_modified
  Folder: name, owner (User), parent_folder, color

LAYOUT:
  Left: Folders sidebar (250px)
  Middle: Note list (300px)
  Right: Rich text editor (remaining)

AUTO-SAVE:
  Do every 5 seconds:
    When content changed:
      Make changes to note (content, title, last_modified)
      Show 'Saved' indicator

SEARCH:
  Filter notes where title/content contains search text
  Ignore empty constraints for full list

SHARING:
  Share button → search user by email
  Add to shared_with list
  Privacy Rules: view when owner or in shared_with

FOLDER NAVIGATION:
  Click folder → set active_folder state
  Filter notes by folder
  All Notes / Shared With Me special views
```

## Common mistakes

- **Storing plain text instead of HTML from the rich text editor** — Rich text formatting (bold, lists, links) is stored as HTML — storing only plain text loses all formatting Fix: Use a text field that stores the full HTML output from the Rich Text Editor
- **Auto-saving every second instead of every 5 seconds** — One-second saves create excessive database writes and WU consumption, especially during active editing Fix: Use a 5-second interval and only save when content has actually changed since the last save
- **Not setting Privacy Rules for shared notes** — Without Privacy Rules, all notes are visible to all users via the API, even if the UI hides them Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/develop-a-note-taking-app-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/develop-a-note-taking-app-in-bubble