Writer

A minimal, AI-powered note-taking app for iOS built with React Native and Expo. Writer uses intelligent inline autocomplete to help you write faster—just type / to mark blanks and // to fill them with context-aware suggestions.

Features

AI-Powered Inline Autocomplete

• Single slash (/) — Mark placeholder positions in your text
• Double slash (//) — Trigger AI to fill all placeholders contextually
• Uses surrounding text (before AND after cursor) to generate accurate completions
• Web search enabled for factual queries (dates, names, facts)
• Streaming text animation for a natural typing feel

Smart Note Management

• Auto-save as you type
• Auto-generated titles based on content (supports multiple languages)
• Swipe-up gesture to access saved notes
• Empty notes are automatically discarded

Minimal, Distraction-Free UI

• Clean, focused writing environment
• Light and dark theme support
• Floating menu with drag-to-reposition
• Keyboard-aware interface that adapts smoothly

How It Works

1. Write naturally — Start typing your note
2. Mark blanks — Use / where you want AI suggestions

   The capital of France is /. It's known for the /.
   

3. Trigger fill — Type // at the end to fill all blanks

   The capital of France is Paris. It's known for the Eiffel Tower.
   

The AI considers both the text before AND after each placeholder to generate contextually appropriate completions.

Inline Fill

Type // mid-sentence for immediate inline completion at that exact position.

Setup

Prerequisites

• Node.js 18+
• Expo CLI
• iOS device with Expo Go (or iOS Simulator)

Installation

# Clone the repository
git clone https://github.com/eli-w-king/text-editor-app.git
cd text-editor-app

# Install dependencies
npm install

# Start the development server
npm start

API Configuration

Writer uses OpenRouter for AI completions.

First, create your config file:

cp constants/api.example.js constants/api.js

Option A: Quick Start (For Development)

Use your own OpenRouter API key:

1. Leave PROXY_URL = null in constants/api.js
2. Get an API key from openrouter.ai
3. Run the app and tap the menu → API
4. Paste your API key

Option B: Deploy a Backend (For Distribution)

If you're distributing the app and don't want users to need API keys, deploy the included Cloudflare Worker:

cd backend
npm install
npx wrangler login    # Creates account if needed
npx wrangler deploy   # Deploys your worker
npx wrangler secret put OPENROUTER_API_KEY   # Paste your key when prompted

Copy the URL it gives you and update your constants/api.js:

export const PROXY_URL = 'https://YOUR-WORKER-URL.workers.dev';

Now the app connects automatically—no API key needed for users!

Project Structure

text-editor-app/
├── app/                        # Expo Router screens
│   ├── _layout.tsx             # Root layout with providers
│   ├── index.tsx               # Home screen (notes list)
│   ├── modal.tsx               # Modal screen
│   └── note/
│       └── [id].tsx            # Note editor (dynamic route)
├── backend/                    # Cloudflare Worker API proxy
│   ├── worker.js               # Worker code
│   ├── wrangler.toml           # Wrangler configuration
│   └── README.md               # Deployment instructions
├── components/
│   ├── FloatingMenu.tsx        # Draggable floating action menu
│   ├── GlobalUI.tsx            # Global UI components
│   └── ui/                     # Reusable UI primitives
├── constants/
│   ├── api.js                  # API configuration (proxy URL)
│   ├── prompts.ts              # LLM system prompts
│   └── theme.ts                # Color definitions
├── context/
│   └── AppContext.tsx          # Global state (theme, API, settings)
├── hooks/
│   ├── useNotes.ts             # Notes CRUD operations
│   ├── use-color-scheme.ts     # Color scheme detection
│   └── use-theme-color.ts      # Theme color utilities
├── styles/
│   └── index.js                # Shared styles
├── utils/
│   └── animations.js           # Text streaming animations
├── assets/                     # Fonts and images
├── App.js                      # Legacy app entry
├── app.json                    # Expo configuration
├── package.json                # Dependencies
└── tsconfig.json               # TypeScript configuration

Themes

Toggle between light and dark themes via the floating menu:

• Light — Clean white background
• Dark — Easy on the eyes for nighttime writing

Dev Mode

Dev mode enables a Debug panel in the floating menu for inspecting LLM requests and responses.

To enable: Type dev mode boing boing anywhere in a note.

To disable: Type dev mode boing boing hide anywhere in a note.

Once enabled, a Debug option appears in the floating menu. The debug panel shows:

• Current LLM connection status
• Active theme
• Raw messages sent to the model
• Raw API responses

The panel also includes a Reset button to clear all app settings and API keys.

Tech Stack

• React Native + Expo (SDK 54)
• Expo Router — File-based navigation
• AsyncStorage — Local data persistence
• OpenRouter API — LLM completions with web search
• React Native Reanimated — Smooth animations
• Expo Blur — Native blur effects

License

MIT