How to Integrate Lovable with Khan Academy

Before building anything, it is important to understand the current state of Khan Academy's API so you can plan your integration correctly. Khan Academy's public API (api.khanacademy.org) was deprecated in 2018 and provides very limited functionality. The endpoints for exercises, topic trees, and user data require a formal partnership agreement and are not available to independent developers. Attempting to call these endpoints will return 403 Forbidden or empty responses. What IS accessible without authentication: - Khan Academy video URLs on YouTube (all Khan Academy videos are also on YouTube's khanacademy channel) - Khan Academy's own video player pages at khanacademy.org/... which can be embedded via iframe - Khan Academy's oEmbed endpoint at https://www.khanacademy.org/api/labs/shorten/oembed?url={videoUrl} — this returns embed code for any Khan Academy video URL - The public content library browsable at khanacademy.org — you can manually collect URLs The recommended strategy for a Lovable integration is: manually curate the Khan Academy video URLs you want to use, store them in your Supabase database, and use the oEmbed endpoint to get embed code for displaying them. Your Edge Function will handle the oEmbed request (since the endpoint does not support CORS for browser requests). All user progress, bookmarks, and learning path data is stored in your Supabase tables — not fetched from Khan Academy's API. This means setup involves creating the right Supabase schema first, then building UI around it, rather than setting up API credentials.

Khan Academy's oEmbed endpoint does not send CORS headers that allow browser requests, so you need an Edge Function to fetch oEmbed data server-side and return it to your frontend. This Edge Function takes a Khan Academy video URL and returns the embed HTML and video metadata. Paste this prompt into Lovable's chat to generate the Edge Function: 'Create a Supabase Edge Function at supabase/functions/khan-oembed/index.ts that accepts a POST request with JSON body { url: "https://www.khanacademy.org/..." }. The function should call https://www.khanacademy.org/api/labs/shorten/oembed?url={encodedUrl}&format=json and return the response. Include CORS headers. If the oEmbed call fails (Khan Academy video not found or URL invalid), return a fallback response that constructs a YouTube embed URL by extracting the video ID from the Khan Academy URL if possible.' Khan Academy videos that exist on YouTube follow a pattern where the YouTube video ID can sometimes be inferred, but the most reliable approach is using Khan Academy's oEmbed endpoint directly. The oEmbed response includes: html (the embed code), title, thumbnail_url, width, height, and author_name. Alternatively, since all Khan Academy videos are also on YouTube, you can bypass the oEmbed approach entirely and embed videos directly using YouTube's iframe embed URL: https://www.youtube.com/embed/{videoId}. The challenge is extracting the YouTube video ID from a Khan Academy URL, which requires either storing both URLs or building a URL conversion function. For simplicity, storing the YouTube URL alongside the Khan Academy URL in your database is the most reliable approach.

1// supabase/functions/khan-oembed/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') {
9    return new Response('ok', { headers: corsHeaders });
10  }
11
12  try {
13    const { url } = await req.json();
14
15    if (!url || !url.includes('khanacademy.org')) {
16      return new Response(
17        JSON.stringify({ error: 'Invalid Khan Academy URL' }),
18        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
19      );
20    }
21
22    const oEmbedUrl = `https://www.khanacademy.org/api/labs/shorten/oembed?url=${encodeURIComponent(url)}&format=json`;
23
24    const response = await fetch(oEmbedUrl, {
25      headers: { 'User-Agent': 'Mozilla/5.0 (compatible; LovableApp/1.0)' },
26    });
27
28    if (!response.ok) {
29      return new Response(
30        JSON.stringify({ error: 'oEmbed fetch failed', status: response.status, html: null }),
31        { status: 200, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
32      );
33    }
34
35    const data = await response.json();
36
37    return new Response(JSON.stringify(data), {
38      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
39    });
40  } catch (error) {
41    return new Response(
42      JSON.stringify({ error: error.message, html: null }),
43      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
44    );
45  }
46});

With the database schema and Edge Function in place, build the React component that displays Khan Academy videos. The component queries your Supabase khan_content table for content, renders video thumbnails in a grid, and shows the embedded player when a user clicks a video. Paste this prompt into Lovable's chat: 'Create a React component called KhanContentViewer that fetches all rows from the khan_content Supabase table filtered by subject (passed as a prop). Display items in a responsive grid of cards showing thumbnail_url, title, subject badge, and grade_level. When a user clicks a card, open a modal showing the embedded Khan Academy video. Get the embed HTML by calling the khan-oembed Edge Function with the item's khan_url. Below the video, show the description and a "Mark as Complete" button. When clicked, insert a row into the completions table. If the user has already completed this item, show a green checkmark instead.' The embed HTML returned by oEmbed includes an iframe tag. In React, you can render it safely using dangerouslySetInnerHTML — but only because this HTML is coming from Khan Academy's own oEmbed endpoint, not from user input. Never use dangerouslySetInnerHTML with user-supplied content. For the iframe size, use a responsive wrapper with a 16:9 aspect ratio: a div with padding-bottom: 56.25% and position: relative, with the iframe inside set to position: absolute and width/height 100%. This ensures the video fills the modal width on all screen sizes. If you stored YouTube URLs alongside Khan Academy URLs in your database (as suggested in Step 2), you can bypass the oEmbed lookup entirely and construct the embed directly: https://www.youtube.com/embed/{youtubeVideoId}?autoplay=1. This is faster and more reliable than calling the oEmbed endpoint.

To make the integration genuinely useful for educational apps, add a progress dashboard that shows each user's learning progress and a way to organize content into structured learning paths. First, add a learning_paths table to your Supabase database and a learning_path_items junction table: 'Create two new Supabase tables: learning_paths (id uuid, title text, description text, created_by uuid references auth.users, is_public boolean, created_at timestamptz) and learning_path_items (id uuid, path_id uuid references learning_paths, content_id uuid references khan_content, order_index integer). Add RLS policies so all users can read public learning paths and their items. Owners can insert/update/delete their own paths.' Then build a progress dashboard component that shows: total videos completed, completion percentage per subject, a streak counter based on consecutive days with completions, and a recommended next video (the next incomplete item in a learning path the user is following). For the recommendations, a simple SQL query in your Edge Function works well: select the next learning_path_item where the content_id does not appear in the user's completions table, ordered by order_index. This gives you a basic "next lesson" recommendation without any machine learning. For complex multi-step learning path designs or when you need to integrate Khan Academy content into a larger curriculum management system, RapidDev's team can help architect the data model and query logic for your specific use case.