How to Integrate Bolt.new with Evernote

For personal applications accessing your own Evernote data, a developer token is the simplest and fastest authentication method — no OAuth dance, no callback URL setup, just a static token that grants full API access to your account. To get a developer token, navigate to dev.evernote.com in your browser. Click the link to get a developer token — you will need to log in with your Evernote account credentials if not already logged in. On the developer token page, you will see two important values: your developer token (a long alphanumeric string) and your Note Store URL (a URL like https://www.evernote.com/shard/s1/notestore). Copy both values immediately — the developer token is your API credential, and the Note Store URL is the endpoint URL for all API calls specific to your account shard. Evernote accounts are distributed across multiple shards (s1, s2, etc.) based on account creation date and region. The Note Store URL is shard-specific — using the wrong shard URL will result in API errors even with a valid token. Always use the exact Note Store URL shown on the developer token page for your account, not a generic Evernote API URL. Add both values to your .env file: EVERNOTE_DEVELOPER_TOKEN and EVERNOTE_NOTE_STORE_URL. These must not have the NEXT_PUBLIC_ prefix — Evernote tokens grant full account access and must never be exposed in client-side JavaScript. For apps where other Evernote users will log in to access their own notes, OAuth 1.0a is required. This involves requesting a temporary token, redirecting the user to Evernote's authorization page, receiving a callback with a verifier, and exchanging it for an access token. The callback URL must be a publicly accessible URL — the Bolt WebContainer preview cannot receive OAuth callbacks. Register your deployed URL (Netlify or Bolt Cloud) as the OAuth callback URI in the Evernote developer portal. For multi-user apps, recommend Notion as a simpler modern alternative with OAuth 2.0.

1// lib/evernote.ts
2// Evernote API uses Thrift protocol over HTTP.
3// For note listing and metadata, we use the JSON/REST-compatible endpoints.
4// Full ENML content requires the evernote npm package or direct Thrift calls.
5
6const EVERNOTE_TOKEN = process.env.EVERNOTE_DEVELOPER_TOKEN;
7const NOTE_STORE_URL = process.env.EVERNOTE_NOTE_STORE_URL;
8
9function getBaseUrl(): string {
10  if (!NOTE_STORE_URL || !EVERNOTE_TOKEN) {
11    throw new Error('EVERNOTE_DEVELOPER_TOKEN and EVERNOTE_NOTE_STORE_URL must be set in .env');
12  }
13  return NOTE_STORE_URL;
14}
15
16export interface EvernoteNotebook {
17  guid: string;
18  name: string;
19  defaultNotebook: boolean;
20  serviceCreated: number;
21  serviceUpdated: number;
22}
23
24export interface EvernoteNoteMetadata {
25  guid: string;
26  title: string;
27  created: number;
28  updated: number;
29  notebookGuid: string;
30  tagGuids?: string[];
31  contentLength?: number;
32}
33
34// Fetch using the evernote npm package (install: npm install evernote)
35import Evernote from 'evernote';
36
37export function getEvernoteClient() {
38  return new Evernote.Client({
39    token: EVERNOTE_TOKEN,
40    sandbox: false,
41    china: false,
42  });
43}
44
45export async function fetchNotebooks(): Promise<EvernoteNotebook[]> {
46  const client = getEvernoteClient();
47  const noteStore = client.getNoteStore();
48  // @ts-expect-error - Evernote SDK types are loose
49  const notebooks = await noteStore.listNotebooks();
50  return notebooks as EvernoteNotebook[];
51}
52
53export async function fetchNotesMeta(
54  options: { notebookGuid?: string; words?: string; maxNotes?: number } = {}
55): Promise<EvernoteNoteMetadata[]> {
56  const client = getEvernoteClient();
57  const noteStore = client.getNoteStore();
58
59  const filter: Record<string, unknown> = {};
60  if (options.notebookGuid) filter.notebookGuid = options.notebookGuid;
61  if (options.words) filter.words = options.words;
62
63  const spec = { includeTitle: true, includeCreated: true, includeUpdated: true, includeNotebookGuid: true, includeTagGuids: true };
64
65  // @ts-expect-error - Evernote SDK types are loose
66  const result = await noteStore.findNotesMetadata(filter, 0, options.maxNotes || 20, spec);
67  return (result.notes || []) as EvernoteNoteMetadata[];
68}

With the Evernote client configured, build the Next.js API routes that your React components will call. Notebook and note metadata listing are the safest starting points because they involve minimal data volume and no ENML parsing complexity. The listNotebooks call returns all notebooks in the account, including the default notebook, shared notebooks, and linked notebooks. Each notebook has a guid (unique identifier), name, defaultNotebook boolean, and timestamp fields for creation and update time. The GUID is what you use to filter notes to a specific notebook — store it in component state when the user selects a notebook. Note metadata (from findNotesMetadata) is distinct from note content. Metadata includes the title, creation date, update date, notebook GUID, and tag GUIDs without fetching the full note content. This is efficient for building list views — you get everything needed to display a note row without the overhead of fetching each note's ENML body. Full content is fetched separately on demand when the user clicks a specific note. Evernote's search grammar (Evernote Search Grammar, documented at dev.evernote.com) supports keyword search, notebook-scoped search (notebook:MyNotebook), tag filtering (tag:important), date ranges (created:month-1), and full-text content search. Pass search strings directly as the words parameter in the NoteFilter. The search indexes are maintained server-side, so full-text search across thousands of notes is fast. For the note list API, handle the case where a user has many notes by limiting results with maxNotes and implementing a page offset parameter. The findNotesMetadata call accepts offset and maxNotes parameters for pagination. Include the total note count from the result for displaying 'Showing X of Y notes' in the UI.

1// app/api/evernote/notebooks/route.ts
2import { NextResponse } from 'next/server';
3import { fetchNotebooks } from '@/lib/evernote';
4
5let notebooksCache: { data: unknown; expiresAt: number } | null = null;
6
7export async function GET() {
8  if (notebooksCache && Date.now() < notebooksCache.expiresAt) {
9    return NextResponse.json(notebooksCache.data);
10  }
11
12  try {
13    const notebooks = await fetchNotebooks();
14    const sorted = notebooks.sort((a, b) => a.name.localeCompare(b.name));
15    const result = { notebooks: sorted, total: sorted.length };
16    notebooksCache = { data: result, expiresAt: Date.now() + 5 * 60 * 1000 };
17    return NextResponse.json(result);
18  } catch (err) {
19    const message = err instanceof Error ? err.message : 'Failed to fetch notebooks';
20    return NextResponse.json({ error: message }, { status: 500 });
21  }
22}

Displaying the full body of an Evernote note requires fetching the note content and converting ENML to renderable HTML. ENML is a well-formed XML format with a specific root element structure and Evernote-specific custom elements. A full ENML note content string looks like this: the document starts with an XML declaration and DOCTYPE referencing Evernote's ENML DTD, followed by an en-note root element containing the note body. The body uses standard HTML-like elements (p, br, div, span, a, table, tr, td, ul, li) plus two Evernote-specific elements: en-media (for embedded attachments and images, identified by resource hash) and en-todo (for checkboxes). For basic note display, strip the ENML wrapper and convert to plain HTML by replacing en-note with div, removing the XML declaration and DOCTYPE, and replacing or removing en-media elements. The strip-tags or cheerio npm packages work well for this parsing. For production apps where formatting fidelity matters, the evernote npm package includes enml-to-html conversion utilities. Inline images in Evernote notes are stored as resources (attachments) and referenced in ENML by their hash. To display images, you need to fetch the resource data separately using noteStore.getResourceByHash() and either return the binary data as a base64 data URL or proxy it through your API route. This is the most complex part of Evernote rendering and is often skipped in dashboard-style integrations where note summaries are sufficient. For search within note content, rely on Evernote's server-side full-text search rather than fetching all content and searching client-side. Evernote maintains search indexes for all note text including OCR'd content from images — a feature that is difficult to replicate locally.

1// app/api/evernote/notes/[guid]/route.ts
2import { NextResponse } from 'next/server';
3import { getEvernoteClient } from '@/lib/evernote';
4
5function enmlToHtml(enml: string): string {
6  if (!enml) return '';
7
8  return enml
9    // Remove XML declaration
10    .replace(/<\?xml[^>]*\?>/gi, '')
11    // Remove DOCTYPE
12    .replace(/<!DOCTYPE[^>]*>/gi, '')
13    // Replace en-note opening tag
14    .replace(/<en-note[^>]*>/gi, '<div class="note-content">')
15    // Replace en-note closing tag
16    .replace(/<\/en-note>/gi, '</div>')
17    // Replace en-media with placeholder
18    .replace(/<en-media[^/]*/gi, '<span class="attachment-placeholder">[Attachment]')
19    .replace(/\/>/gi, '</span>')
20    // Replace en-todo checkboxes
21    .replace(/<en-todo\s+checked="true"\s*\/>/gi, '<input type="checkbox" checked disabled />')
22    .replace(/<en-todo[^/]*\/>/gi, '<input type="checkbox" disabled />')
23    // Clean up any remaining Evernote namespace attributes
24    .replace(/\s+xmlns:[^"]*"[^"]*"/gi, '')
25    .trim();
26}
27
28export async function GET(
29  _request: Request,
30  { params }: { params: { guid: string } }
31) {
32  try {
33    const client = getEvernoteClient();
34    const noteStore = client.getNoteStore();
35
36    // getNote(guid, withContent, withResourcesData, withResourcesRecognition, withResourcesAlternateData)
37    // @ts-expect-error - Evernote SDK types are loose
38    const note = await noteStore.getNote(params.guid, true, false, false, false);
39
40    const html = enmlToHtml(note.content || '');
41
42    return NextResponse.json({
43      guid: note.guid,
44      title: note.title,
45      content: html,
46      created: note.created,
47      updated: note.updated,
48      notebookGuid: note.notebookGuid,
49      tagNames: note.tagNames || [],
50    });
51  } catch (err) {
52    const message = err instanceof Error ? err.message : 'Failed to fetch note';
53    return NextResponse.json({ error: message }, { status: 500 });
54  }
55}

If you want users to log in to authorize your app to access their own Evernote accounts, OAuth 1.0a is required. This is a more complex protocol than OAuth 2.0, involving multiple round-trips with cryptographic signatures on each request. The OAuth 1.0a flow with Evernote has four steps. First, your server requests a temporary token from Evernote by making a signed POST to https://www.evernote.com/oauth. Second, you redirect the user to https://www.evernote.com/OAuth.action?oauth_token=TEMP_TOKEN where they see an Evernote authorization screen. Third, after the user approves, Evernote redirects to your callback URL with oauth_token and oauth_verifier query parameters. Fourth, your server exchanges the verifier for a permanent access token. Step three — receiving the OAuth callback — is the critical requirement for deployment. The Bolt WebContainer preview URL (a hash-based *.webcontainer-api.io URL) cannot be registered as an OAuth callback and cannot receive incoming HTTP redirects from Evernote. You must deploy to Netlify or Bolt Cloud first, then register your deployed URL as the OAuth callback in your Evernote API key settings at dev.evernote.com. The oauth-1.0a npm package simplifies signature generation. Install it with npm install oauth-1.0a crypto-js and use it to sign each request with your consumer key, consumer secret, and the appropriate token for each step. Store the temporary token in a server-side session (or a signed cookie) between the redirect and the callback to maintain state. For personal apps accessing only your own notes, skip OAuth entirely and use the developer token approach from Step 1 — it is much simpler. OAuth 1.0a is only necessary when other Evernote users need to log in to your app.

1// app/api/evernote/auth/start/route.ts
2// IMPORTANT: Evernote OAuth 1.0a requires a publicly accessible callback URL.
3// This endpoint will not work in Bolt's WebContainer preview.
4// Deploy to Netlify or Bolt Cloud first, then:
5// 1. Register your deployed URL + '/api/evernote/auth/callback' in Evernote developer portal
6// 2. Add EVERNOTE_CONSUMER_KEY and EVERNOTE_CONSUMER_SECRET to your hosting environment variables
7// For personal use, skip OAuth entirely and use a developer token from dev.evernote.com
8import { NextResponse } from 'next/server';
9
10export async function GET() {
11  const isDevelopment = process.env.NODE_ENV === 'development';
12
13  if (isDevelopment) {
14    return NextResponse.json({
15      error: 'OAuth flow requires deployment',
16      message: 'Evernote OAuth 1.0a callbacks cannot be received in Bolt WebContainer preview. Deploy to Netlify or Bolt Cloud first, then register your callback URL at dev.evernote.com.',
17      alternative: 'For personal apps, use a developer token from dev.evernote.com instead of OAuth.',
18    }, { status: 501 });
19  }
20
21  // TODO: Implement OAuth 1.0a flow after deployment
22  // 1. Generate oauth_nonce and oauth_timestamp
23  // 2. Sign request with consumer key + secret using HMAC-SHA1
24  // 3. POST to https://www.evernote.com/oauth to get temp token
25  // 4. Redirect user to https://www.evernote.com/OAuth.action?oauth_token={tempToken}
26  return NextResponse.json({ message: 'OAuth initiation - implement after deployment' });
27}