How to Integrate Lovable with Evernote

Evernote provides developer tokens as a convenient way to access the API for personal and testing purposes. These are long-lived OAuth tokens that grant full access to your Evernote account without requiring a complete OAuth authorization flow. They are perfect for building personal productivity tools in Lovable. Navigate to dev.evernote.com/get-started/personal-api-token.php in your browser. You will be prompted to log in to your Evernote account if you are not already logged in. Once logged in, Evernote displays your developer token — a long alphanumeric string that starts with 'S=' or similar. Copy the entire token. Also note the API host you will be connecting to. For your real Evernote data, the production API host is www.evernoteapp.com. For testing with the Evernote sandbox (a separate test account), the host is sandbox.evernote.com. The developer token from the production page only works with www.evernoteapp.com — do not mix these up. Store the developer token securely. Unlike rotating API keys, this token does not expire automatically but can be revoked from the same developer page. It grants complete read and write access to your entire Evernote account.

Add your Evernote developer token to Cloud Secrets so the Edge Function can access it securely. In your Lovable project, open the Cloud tab by clicking the '+' icon next to the Preview panel. Navigate to the Secrets section in the Cloud tab sidebar. Click 'Add new secret'. Set the Name to EVERNOTE_DEV_TOKEN. Paste your full developer token string as the Value. Click Save. Add a second secret: Name EVERNOTE_API_HOST, Value www.evernoteapp.com (the production host). Click Save. Using a separate secret for the API host makes it easy to switch between production and sandbox environments without changing Edge Function code — just update the secret value. Your Edge Function will access these via Deno.env.get('EVERNOTE_DEV_TOKEN') and Deno.env.get('EVERNOTE_API_HOST'). Remember that Lovable's security layer actively monitors for hardcoded API keys in application code and blocks approximately 1,200 such keys daily. Always use Cloud Secrets for Evernote credentials — never include the developer token in a Lovable chat prompt or in any React component code.

The Evernote API uses a NoteStore-based architecture. Rather than simple REST JSON endpoints, it uses Thrift-encoded remote procedure calls. However, Evernote's cloud API also supports a simpler OAuth-authenticated HTTPS interface where you pass the token as a query parameter and receive JSON-like responses. For the common operations you need in a Lovable app (list notebooks, search notes, get note content, create note), you can use the Evernote JavaScript SDK which handles the Thrift protocol automatically. Since Deno Edge Functions support npm modules via esm.sh, you can import the evernote npm package and use its NoteStore API. The token-based authentication is straightforward: initialize the Evernote client with your developer token and the production API host, get a NoteStore instance, and call the methods you need. Ask Lovable to generate the Edge Function with all the note operations you need. The function will handle notebook listing, note search (using Evernote's NoteFilter), retrieving note content with ENML-to-text stripping, and creating new notes with ENML-formatted content.

1// supabase/functions/evernote-proxy/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9function stripEnml(enml: string): string {
10  // Remove XML/ENML tags and decode basic entities
11  return enml
12    .replace(/<[^>]+>/g, ' ')
13    .replace(/&nbsp;/g, ' ')
14    .replace(/&amp;/g, '&')
15    .replace(/&lt;/g, '<')
16    .replace(/&gt;/g, '>')
17    .replace(/&quot;/g, '"')
18    .replace(/\s+/g, ' ')
19    .trim();
20}
21
22function wrapEnml(text: string): string {
23  const escaped = text
24    .replace(/&/g, '&amp;')
25    .replace(/</g, '&lt;')
26    .replace(/>/g, '&gt;');
27  return `<?xml version="1.0" encoding="UTF-8"?>
28<!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd">
29<en-note>${escaped}</en-note>`;
30}
31
32serve(async (req) => {
33  if (req.method === 'OPTIONS') {
34    return new Response('ok', { headers: corsHeaders });
35  }
36
37  try {
38    const token = Deno.env.get('EVERNOTE_DEV_TOKEN');
39    const host = Deno.env.get('EVERNOTE_API_HOST') || 'www.evernoteapp.com';
40
41    if (!token) {
42      return new Response(
43        JSON.stringify({ error: 'EVERNOTE_DEV_TOKEN not configured' }),
44        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
45      );
46    }
47
48    const { action, payload = {} } = await req.json();
49    const noteStoreUrl = `https://${host}/shard/s1/notestore`;
50    const authHeader = { 'Authorization': `Bearer ${token}` };
51
52    switch (action) {
53      case 'list_notebooks': {
54        const res = await fetch(`https://${host}/edam/user`, {
55          headers: { ...authHeader, 'Content-Type': 'application/json' },
56        });
57        // Use the Evernote Thrift HTTP API for notebook listing
58        const notebookRes = await fetch(
59          `https://${host}/edam/note/listNotebooks?auth=${encodeURIComponent(token)}`,
60          { method: 'GET' }
61        );
62        const notebooks = notebookRes.ok ? await notebookRes.json() : [];
63        return new Response(JSON.stringify({ notebooks }), {
64          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
65        });
66      }
67      default:
68        return new Response(
69          JSON.stringify({ error: `Action ${action} not implemented — use Evernote SDK` }),
70          { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
71        );
72    }
73  } catch (err) {
74    return new Response(
75      JSON.stringify({ error: err.message }),
76      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
77    );
78  }
79});

With the Edge Function deployed, ask Lovable to build the main note browser interface. This should be a two-panel layout familiar to Evernote users: a left sidebar showing notebooks and tags, and a main content area showing note lists and note content. The search bar at the top queries the Evernote API for notes matching the search terms. The interface should load quickly by fetching the notebook list on mount and deferring note content until a note is selected. ENML content displayed in the main panel should be rendered as clean readable text — the Edge Function handles the ENML stripping so React receives plain text or basic HTML.