Skip to main content

​
Overview

Uxie’s note editor provides a powerful, distraction-free environment for taking notes alongside your PDF documents. Built on BlockNote, it offers rich formatting, AI-powered writing assistance, and automatic syncing of highlights from your PDF.

​
Key Features

Rich Text Editing

Full formatting support including bold, italic, underline, colors, and more

AI Writing Assistant

Get AI help to improve, summarize, or expand your writing

Auto-Save

Your notes are automatically saved as you type

Highlight Integration

PDF highlights automatically appear in your notes

​
Getting Started

​
Opening the Editor

The note editor is always visible alongside your PDF:
  1. Open any document in Uxie
  2. The editor appears in the right panel
  3. Start typing immediately - no save button needed
Notes auto-save every 2 seconds after you stop typing. You’ll never lose your work.

​
Formatting Options

​
Text Formatting

Select text to reveal the formatting toolbar:
  • Bold - Ctrl/Cmd + B
  • Italic - Ctrl/Cmd + I
  • Underline - Ctrl/Cmd + U
  • Strikethrough
  • Inline code - Ctrl/Cmd + E
Use the block type dropdown to change any line to:
  • Paragraph (default)
  • Headings (H1, H2, H3)
  • Bullet list
  • Numbered list
  • Checklist
  • Code block
  • Quote
  • Left align
  • Center align
  • Right align
  • Text color picker
  • Background color picker
  • Multiple preset colors

​
Slash Commands

Type / to open the command menu and quickly insert:
  • Different block types (headings, lists, quotes)
  • Media (images, files)
  • Advanced blocks (tables, code blocks)
The slash menu is searchable - just keep typing after / to filter options.

​
AI Writing Features

​
AI Assistant Popover

Get AI help with any block in your notes:
1

Open Block Menu

Click the drag handle (⋮⋮) on the left of any block
2

Select AI

Click the AI option from the menu
3

Choose Action

Select from AI commands:
  • Improve writing: Enhance clarity and style
  • Fix spelling & grammar: Correct errors
  • Summarise: Create a concise version
  • Explain this: Get a simpler explanation
  • Find action items: Extract tasks and to-dos
4

Apply

The AI generates suggestions - click to apply them
Implemented at /src/components/editor/custom/ai/popover.tsx.

​
AI Text Completion

Use ++ to trigger AI text continuation:
  1. Type your text normally
  2. Type ++ at the end of any line
  3. The AI automatically continues writing based on context
  4. Press Escape to cancel or Ctrl/Cmd + Z to undo
AI completion uses the last 500 characters of context to generate relevant continuations.
AI features are powered by Google’s Gemini 2.5 Flash model for fast, high-quality responses.

​
Working with Highlights

​
Understanding Highlight Blocks

When you highlight text or images in your PDF, they appear as special blocks in your notes: Text highlights:
  • Yellow vertical bar on the left
  • Contains the original highlighted text
  • Clickable to jump to the PDF source
Image highlights:
  • Appear as image blocks
  • Show the captured area from the PDF
  • Can be captioned and resized
1

From Notes to PDF

Click the yellow bar on any highlight block to jump to that exact location in the PDF
2

From PDF to Notes

Create a highlight in the PDF - it automatically appears at the bottom of your notes
This bidirectional linking keeps your notes and source material perfectly synchronized.

​
Editor Controls

​
Drag Handle Menu

Click the drag handle (⋮⋮) on any block to:
  • AI: Open AI assistant
  • Delete: Remove the block
  • Colors: Change text/background colors
  • Drag: Reorder blocks

​
Block Organization

  • Drag blocks: Click and drag the handle to reorder
  • Indent/outdent: Create nested structure (for lists)
  • Delete: Select block and press Delete or Backspace

​
Collaborative Editing

​
Permissions

RoleRead NotesEdit Notes
Owner✓✓
Editor✓✓
Viewer✓✗
Viewers see notes in read-only mode. They cannot edit, add, or delete content.

​
Real-Time Collaboration

Real-time collaborative editing is currently in development. For now, changes are synced when you reload the page. See /src/components/editor/collaboration-client.tsx for the upcoming implementation.
1

Select Text

Highlight the text you want to turn into a link
2

Click Link Button

Click the link icon in the formatting toolbar
3

Enter URL

Type or paste the URL
4

Confirm

Press Enter to create the link

​
Image Captions

Add context to images:
  1. Click on any image block
  2. Select the image caption button
  3. Type your caption below the image

​
Auto-Save Behavior

  • Saves 2 seconds after you stop typing
  • Saves are debounced to prevent excessive server calls
  • Changes are stored in JSON format
  • No manual save button needed
  • Implementation at /src/components/editor/index.tsx:100
Currently, there’s no visual save indicator. All changes are automatically persisted. A save status indicator is planned for a future update.

​
Technical Details

​
Implementation

The editor is built with:
  • BlockNote: Core rich text editor framework
  • React: UI components and state management
  • TipTap: Underlying editor engine
  • Custom blocks: Highlight blocks for PDF integration

​
Editor Schema

Custom blocks include: 
{
  highlight: HighlightBlock,  // PDF highlight references
  image: ImageBlock,           // Uploaded images
  paragraph: ParagraphBlock,   // Standard text
  // ... other standard BlockNote blocks
}
Defined at /src/lib/editor-utils.ts:1.

​
Data Format

Notes are stored as JSON in BlockNote format: 
[
  {
    "type": "paragraph",
    "content": "Your text here"
  },
  {
    "type": "highlight",
    "content": "Highlighted text",
    "props": {
      "highlightId": "abc123"
    }
  }
]

​
Keyboard Shortcuts

ActionShortcut
BoldCtrl/Cmd + B
ItalicCtrl/Cmd + I
UnderlineCtrl/Cmd + U
Inline codeCtrl/Cmd + E
Open slash menu/
AI completion++
UndoCtrl/Cmd + Z
RedoCtrl/Cmd + Shift + Z
Cancel AI generationEscape

​
Best Practices

Structure your notes: Use headings to organize different sections or topics within a document.
Combine highlights and text: After adding highlights, write your own thoughts and connections to deepen understanding.
Use AI strategically: The AI assistant is great for fixing grammar or finding action items, but your own thinking is more valuable for learning.
Click yellow bars: Navigate back to source material frequently to maintain context.

​
Export Options

Note export functionality is planned for a future release. Currently, you can copy and paste content from the editor.

Annotations

Create highlights that sync to notes

AI Chat

Ask questions to enhance your notes

Collaboration

Share and collaborate on documents

Build docs developers (and LLMs) love

Get started for freeTalk to us