# How to Integrate Bolt.new with Khan Academy API

- Tool: Bolt.new
- Difficulty: Intermediate
- Time required: 20 minutes
- Last updated: April 2026

## TL;DR

Khan Academy deprecated their public API in 2020 — there is no active Khan Academy API to connect to Bolt.new. The practical approach is to embed Khan Academy content via iframes, link to exercises from a Bolt-built learning portal, and use alternative open education APIs like Open Library or Wikipedia for content data. Build your learning platform in Bolt with Supabase and link out to Khan Academy's free resources.

## Build a Khan Academy Learning Portal in Bolt.new Using Embeds and Open APIs

Khan Academy provided a public REST API for accessing their course catalog, exercise content, and user progress data from approximately 2012 to 2020. In 2020, Khan Academy discontinued access to this API, redirecting developers to use their embedded player options and official partner programs instead. As of 2026, there is no publicly available Khan Academy API that returns structured content data for third-party apps. Any tutorials or Stack Overflow answers describing Khan Academy API endpoints are outdated and will not work.

The practical path for building Khan Academy-powered educational applications in Bolt.new involves three complementary approaches. First, Khan Academy supports iframe embedding of individual videos and exercises — you can embed any Khan Academy YouTube video using the standard YouTube iframe API, since Khan Academy hosts their videos on YouTube. Second, you can build a curated learning portal that links directly to Khan Academy topics, exercises, and courses, providing navigation and discovery features without requiring API access. Third, for applications that need real educational content data (course lists, topics, prerequisites), you can use active open education APIs like the Open Library API (openlibrary.org/developers), Wikipedia's MediaWiki API, or the Internet Archive API alongside your Khan Academy links.

Bolt.new is particularly well-suited for building the surrounding application layer — user progress tracking, course curation, study schedules, and dashboards — even when the content itself lives on an external platform. Deploy your Bolt-built portal to Netlify or Vercel and embed Khan Academy resources as a curated content library that your users interact with through your branded interface.

## Before you start

- A Bolt.new project with React and your preferred stack (Vite or Next.js)
- A Supabase project for storing user progress, curated resources, and learning data
- An understanding that the Khan Academy public API is deprecated — no API key or registration is needed because there is no active API
- Optional: a free YouTube Data API key if you want to fetch video metadata by search query (not required for direct embeds by video ID)
- A deployed URL on Netlify or Vercel if you want to test YouTube Player API events in a production environment

## Step-by-step guide

### 1. Understand the Current State of Khan Academy API

Before building anything, it is essential to understand why Khan Academy API tutorials from before 2020 no longer work. Khan Academy launched their public API around 2012 alongside their developer documentation at api.khanacademy.org. The API provided endpoints for browsing the topic tree (/api/v1/topictree), retrieving individual exercises (/api/v1/exercises/{name}), and managing user data with OAuth authentication. This API was widely used by educators and developers to build supplementary learning tools. In late 2020, Khan Academy announced they were deprecating the public API, citing challenges with maintaining the API while focusing resources on the core product. They removed public API access and redirected developers to their embed options and official partner programs. As of 2026, attempts to call api.khanacademy.org endpoints return 404 or 403 errors. There is no replacement public API and no announced timeline for a new one. The official developer documentation at khanacademy.org/api redirects to their partner inquiry form. The practical implication for your Bolt.new project: do not attempt to build integration code that calls Khan Academy API endpoints — it will not work. Instead, plan your integration around the three active approaches: iframe embeds for video and exercise content, direct URL links to Khan Academy resources, and alternative open education APIs for structured content data.

**Expected result:** You understand that Khan Academy's public API is deprecated and have a clear plan to use iframes, direct links, and alternative APIs instead.

### 2. Set Up Supabase Tables for Your Learning Portal

Since you are building the application layer rather than consuming a live API, your Supabase database becomes the content backbone of your learning portal. Design tables that store the curated Khan Academy resources you want to present to your users. The core table, learning_resources, should have columns for a unique ID, title, subject category, description, the direct Khan Academy URL for linking, the YouTube video ID for embedding (Khan Academy's videos are all on YouTube — you can find the video ID from any Khan Academy video page by clicking Share), difficulty level, estimated completion time, and whether it is an exercise or video. A second table, user_progress, tracks which resources each authenticated user has started or completed. Prompt Bolt to create both tables in Supabase with appropriate Row Level Security policies: learning_resources should be publicly readable (anyone can browse the content library) but only admin-writable, while user_progress should allow users to read and write only their own records. Pre-populate the learning_resources table with real Khan Academy content — you can manually curate this using Khan Academy's topic tree at khanacademy.org/browsable. Bolt can generate a seed SQL file with INSERT statements for the initial content. Having real data in the table lets you see the portal working immediately rather than waiting to manually populate it after the UI is built.

```
-- Supabase SQL: Create learning portal tables
CREATE TABLE learning_resources (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  subject TEXT NOT NULL,
  description TEXT,
  khanacademy_url TEXT NOT NULL,
  youtube_video_id TEXT,
  difficulty TEXT CHECK (difficulty IN ('Beginner', 'Intermediate', 'Advanced')),
  estimated_minutes INTEGER,
  content_type TEXT CHECK (content_type IN ('video', 'exercise', 'article'))
);

ALTER TABLE learning_resources ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Public read access" ON learning_resources FOR SELECT USING (true);

CREATE TABLE user_progress (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users NOT NULL,
  resource_id UUID REFERENCES learning_resources NOT NULL,
  status TEXT CHECK (status IN ('started', 'completed')),
  completed_at TIMESTAMPTZ,
  UNIQUE(user_id, resource_id)
);

ALTER TABLE user_progress ENABLE ROW LEVEL SECURITY;
CREATE POLICY "User own data" ON user_progress
  USING (auth.uid() = user_id)
  WITH CHECK (auth.uid() = user_id);
```

**Expected result:** Both Supabase tables are created with RLS policies. The learning_resources table has seed data with real Khan Academy URLs ready for the portal UI.

### 3. Build the Learning Portal UI with Curated Khan Academy Resources

With the database ready, prompt Bolt to build the portal interface. The main learning page should fetch resources from Supabase and display them as browsable cards grouped by subject. Each card shows the resource title, subject badge, difficulty level, estimated time, a description, and the content type (video or exercise icon). For resources with a youtube_video_id, show a thumbnail image by constructing the YouTube thumbnail URL (https://img.youtube.com/vi/{video_id}/maxresdefault.jpg) — these thumbnail URLs are publicly accessible without any API key. For resources without a video, show a generic exercise icon. Clicking a card should either open a modal with an embedded YouTube player (for video resources) or open the Khan Academy URL in a new tab (for exercises). The modal approach keeps users in your app longer for video content. Include a subject filter sidebar or tabs so users can browse by subject. Add a progress indicator showing how many resources in each subject the logged-in user has completed. The portal page should use ISR-compatible data fetching so it loads fast — Supabase resources rarely change, making them ideal for caching. Bolt generates all of this from a descriptive prompt specifying the Supabase table structure and desired UI components.

```
// components/LearningResourceCard.tsx
import { useState } from 'react';

interface Resource {
  id: string;
  title: string;
  subject: string;
  description: string;
  khanacademy_url: string;
  youtube_video_id: string | null;
  difficulty: string;
  estimated_minutes: number;
  content_type: string;
}

interface LearningResourceCardProps {
  resource: Resource;
  isCompleted: boolean;
  onMarkComplete: (resourceId: string) => void;
}

export function LearningResourceCard({ resource, isCompleted, onMarkComplete }: LearningResourceCardProps) {
  const [showModal, setShowModal] = useState(false);

  const thumbnailUrl = resource.youtube_video_id
    ? `https://img.youtube.com/vi/${resource.youtube_video_id}/maxresdefault.jpg`
    : null;

  function handleClick() {
    if (resource.youtube_video_id) {
      setShowModal(true);
    } else {
      window.open(resource.khanacademy_url, '_blank', 'noopener noreferrer');
    }
  }

  return (
    <>
      <div
        onClick={handleClick}
        className="bg-white rounded-xl border border-gray-200 overflow-hidden cursor-pointer hover:shadow-md transition-shadow"
      >
        {thumbnailUrl && (
          <img src={thumbnailUrl} alt={resource.title} className="w-full h-40 object-cover" />
        )}
        <div className="p-4">
          <div className="flex items-center justify-between mb-2">
            <span className="text-xs font-semibold bg-green-100 text-green-700 px-2 py-1 rounded">{resource.subject}</span>
            {isCompleted && <span className="text-green-500 text-lg">✓</span>}
          </div>
          <h3 className="font-semibold text-gray-900 mb-1">{resource.title}</h3>
          <p className="text-sm text-gray-500 mb-3 line-clamp-2">{resource.description}</p>
          <div className="flex gap-2 text-xs text-gray-400">
            <span>{resource.difficulty}</span>
            <span>·</span>
            <span>{resource.estimated_minutes} min</span>
          </div>
        </div>
      </div>

      {showModal && resource.youtube_video_id && (
        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" onClick={() => setShowModal(false)}>
          <div className="bg-white rounded-xl max-w-3xl w-full p-6" onClick={(e) => e.stopPropagation()}>
            <h2 className="text-xl font-bold mb-4">{resource.title}</h2>
            <div className="aspect-video mb-4">
              <iframe
                src={`https://www.youtube.com/embed/${resource.youtube_video_id}`}
                className="w-full h-full rounded"
                allowFullScreen
                title={resource.title}
              />
            </div>
            <div className="flex justify-between">
              <a href={resource.khanacademy_url} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline text-sm">
                Open on Khan Academy →
              </a>
              <button
                onClick={() => { onMarkComplete(resource.id); setShowModal(false); }}
                className="bg-green-600 text-white px-4 py-2 rounded text-sm"
              >
                Mark Complete
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}
```

**Expected result:** The /learn page displays curated Khan Academy resources as cards with thumbnails. Clicking a video opens a YouTube embed modal; clicking an exercise opens Khan Academy in a new tab.

### 4. Add Open Library API as an Active Content Data Source

While Khan Academy's API is gone, the Open Library API (a project of the Internet Archive) provides free, active, and well-documented access to millions of books, subjects, and educational topics. No API key or registration is required. The primary search endpoint is https://openlibrary.org/search.json — pass a q (query) or subject parameter and receive structured JSON with titles, authors, cover image IDs, and subject classifications. Cover images load from https://covers.openlibrary.org/b/id/{cover_id}-M.jpg. This makes Open Library a practical supplement for learning portals: you can offer book recommendations alongside Khan Academy video lessons. For example, after a user finishes a Khan Academy algebra video, your portal can suggest related math books from Open Library. Build an API route in Bolt that proxies Open Library search requests, which avoids CORS issues during development. The Open Library API works from Bolt's WebContainer during development because it is an outbound HTTP call — the WebContainer supports outbound requests to external APIs. You can build and test the complete Open Library integration without deploying. The Wikimedia REST API at en.wikipedia.org/api/rest_v1/page/summary/{topic} is another excellent free source — it returns a page summary and thumbnail image for any topic in Wikipedia, which you can display as a brief subject introduction alongside your curated Khan Academy resources.

```
// app/api/search-books/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const subject = searchParams.get('subject') || 'mathematics';

  const response = await fetch(
    `https://openlibrary.org/search.json?subject=${encodeURIComponent(subject)}&limit=8&fields=title,author_name,cover_i,first_publish_year,key`,
    { next: { revalidate: 3600 } }
  );

  const data = await response.json();

  const books = (data.docs || []).map((book: Record<string, unknown>) => ({
    title: book.title as string,
    author: Array.isArray(book.author_name) ? (book.author_name as string[])[0] : 'Unknown',
    coverUrl: book.cover_i
      ? `https://covers.openlibrary.org/b/id/${book.cover_i}-M.jpg`
      : '',
    publishYear: book.first_publish_year,
    openLibraryUrl: `https://openlibrary.org${book.key}`,
  }));

  return NextResponse.json({ books });
}
```

**Expected result:** The /api/search-books endpoint returns book recommendations from Open Library for any subject. The BookRecommendations component displays book covers in a horizontal scroll row on the learning portal.

### 5. Deploy to Netlify or Vercel

Deploying a Khan Academy learning portal is straightforward because the application has no incoming webhook requirements — all data flows are either reads from Supabase or outbound API calls to Open Library and YouTube thumbnail CDNs. During development in Bolt's WebContainer, the complete portal works: Supabase queries execute, Open Library API calls return book data, and YouTube embeds load. The only WebContainer limitation is irrelevant for this integration — there are no incoming webhooks to receive. Push your Bolt project to GitHub and connect it to Netlify or Vercel. Set three environment variables in your hosting dashboard: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, and SUPABASE_SERVICE_ROLE_KEY (for any admin operations). No Khan Academy or YouTube API keys are required since you are using public embed URLs. After deployment, verify the portal loads on the production URL, resources display with thumbnails, YouTube embeds play correctly, and user progress saves to Supabase when a logged-in user marks a resource complete. The Open Library API integration also works on the deployed version without any additional configuration — the API is public and does not require CORS headers for server-side calls.

```
// next.config.ts — ensure images from YouTube and Open Library load
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'img.youtube.com',
      },
      {
        protocol: 'https',
        hostname: 'covers.openlibrary.org',
      },
    ],
  },
};

export default nextConfig;
```

**Expected result:** The deployed portal at your Netlify or Vercel URL loads Khan Academy learning resources, displays YouTube thumbnails, embeds videos in a modal, and shows book recommendations from Open Library.

## Best practices

- Be transparent with users that clicking external resources opens Khan Academy — do not make it appear that the content is hosted on your platform
- Cache Open Library API responses with revalidation (at least 1 hour) since book data does not change frequently and caching significantly improves portal performance
- Store curated resource metadata in your own Supabase database rather than relying on scraping Khan Academy URLs — scraping violates their terms of service
- Use Khan Academy's official share and embed functionality for videos rather than attempting to extract or mirror content
- Build user progress tracking in your own Supabase tables — since there is no Khan Academy API to sync with, your database is the authoritative source for what users have completed
- Consider applying to Khan Academy's official partnership program if your educational app gains traction — partners receive support and resources not available to the general public
- Test YouTube video IDs periodically as part of maintenance — Khan Academy occasionally reorganizes their YouTube channel and old video IDs may become inactive

## Use cases

### Curated Learning Portal with Khan Academy Links

Build a branded learning portal that organizes Khan Academy topics into structured learning paths for a specific audience, such as SAT prep, coding fundamentals, or middle school math. Users browse your portal and click through to Khan Academy exercises, with your app tracking which topics they have visited in a Supabase database.

Prompt example:

```
Build a learning portal for SAT prep. Create a Supabase table called learning_resources with fields: title, subject, description, khanacademy_url, youtube_embed_id, and difficulty. Populate it with 10 Khan Academy math and reading resources using real Khan Academy URLs like https://www.khanacademy.org/math/cc-eighth-grade-math. Build a /learn page that displays these resources grouped by subject with a 'Start Learning' button that opens Khan Academy in a new tab. Add a completed_resources table to track which resources each user has finished.
```

### Embedded Khan Academy Video Lessons

Since Khan Academy hosts videos on YouTube, embed individual lesson videos directly in your Bolt app using the YouTube iframe API. The user watches the lesson in your app without leaving, and you track completion using the YouTube Player API events.

Prompt example:

```
Create a LessonPlayer React component that embeds a Khan Academy YouTube video using the YouTube iframe API. Accept a youtubeVideoId prop. When the video reaches 90% completion (using the YouTube Player API onStateChange event), mark the lesson as complete by calling POST /api/complete-lesson with the lesson ID and user ID. Store completion data in Supabase. Show a completion badge on the lesson card on the course page. Example Khan Academy video IDs: 'eVl5zs6Lqy0' for algebra basics.
```

### Educational Content Hub Using Open Library API

Since Khan Academy's API is deprecated, use the Open Library API as an active educational content source. Build a reading and learning hub that pulls book data, subject information, and reading lists from Open Library's free API and pairs this content with curated links to related Khan Academy exercises.

Prompt example:

```
Build an educational content hub that uses the Open Library API at https://openlibrary.org/search.json to fetch books by subject. Create an API route at /api/search-books that queries Open Library with a subject parameter and returns title, author, cover image URL (https://covers.openlibrary.org/b/id/{cover_id}-M.jpg), and a link to the book on Open Library. Display results in a grid with cover images. Add a sidebar that lists related Khan Academy URLs for the subject (stored in Supabase). This does not require any authentication.
```

## Troubleshooting

### API calls to api.khanacademy.org return 404 or 403 errors

Cause: Khan Academy deprecated their public API in 2020. The endpoints no longer exist and there is no replacement API available to the public.

Solution: Stop attempting to use Khan Academy API endpoints — they are permanently decommissioned. Redesign your integration around iframe embeds for videos/exercises, direct URL links for navigation, and alternative open education APIs like Open Library (openlibrary.org/developers) for structured content data.

### YouTube thumbnails load for some Khan Academy videos but show a gray placeholder for others

Cause: Not all Khan Academy YouTube videos use the maxresdefault thumbnail quality. Some older videos only have lower-quality thumbnails available at the hqdefault or mqdefault sizes.

Solution: Fall back to lower quality thumbnail sizes if maxresdefault returns an error. Use the hqdefault URL (https://img.youtube.com/vi/{id}/hqdefault.jpg) as a fallback. You can detect a failed thumbnail by checking the image dimensions — YouTube's default 'no thumbnail' placeholder is 120x90 pixels.

```
// Fallback thumbnail with error handling
<img
  src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
  onError={(e) => { (e.target as HTMLImageElement).src = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`; }}
  alt={title}
/>
```

### Open Library API returns CORS errors when called directly from the browser in Bolt's preview

Cause: Open Library's API does not set CORS headers that allow browser-side requests from all origins. Calling it directly from client-side JavaScript triggers a CORS block.

Solution: Route Open Library API calls through a server-side API route (/api/search-books) rather than fetching from the browser directly. In Bolt's WebContainer preview, server-side API routes run in the Node.js process and are not subject to browser CORS restrictions. This pattern also lets you cache and transform the response.

## Frequently asked questions

### Is the Khan Academy API still available in 2026?

No. Khan Academy deprecated their public API in 2020. The API endpoints at api.khanacademy.org no longer respond to requests. There is no replacement public API and no announced timeline for a new one. The practical integration approach is iframe embeds for videos and exercises, direct URL links for navigation, and alternative open education APIs for structured data.

### Can I embed Khan Academy exercises in my Bolt app?

Khan Academy provides an embeddable exercise player for select exercises. You can embed their videos via YouTube iframes since all Khan Academy videos are hosted on YouTube. For exercises, you can link to them on khanacademy.org or explore their official embed documentation at khanacademy.org/api for the limited embed capabilities that remain available without API access.

### What is the best free API to use instead of Khan Academy API for educational content?

The Open Library API (openlibrary.org/developers) provides free structured access to millions of books and subjects without requiring an API key. The Wikimedia REST API provides article summaries and images for any topic. For video content, the YouTube Data API (with a free tier) lets you search Khan Academy's YouTube channel by keyword. These three together cover most use cases that Khan Academy's deprecated API addressed.

### Can I test my Bolt learning portal in the WebContainer preview without deploying?

Yes — unlike integrations that depend on incoming webhooks, a learning portal built around Supabase and outbound API calls works fully in Bolt's WebContainer preview. Supabase queries, Open Library API calls, and YouTube embeds all work during development. You only need to deploy when you want your portal accessible at a public URL.

### Do I need a YouTube API key to show Khan Academy videos?

No. You can embed any public YouTube video (including Khan Academy videos) using the standard iframe embed URL https://www.youtube.com/embed/{video_id} without any API key. YouTube thumbnail images at img.youtube.com/vi/{id}/maxresdefault.jpg also load without authentication. A YouTube Data API key is only needed if you want to search for videos programmatically or fetch video metadata like view counts and descriptions.

---

Source: https://www.rapidevelopers.com/bolt-ai-integrations/khan-academy-api
© RapidDev — https://www.rapidevelopers.com/bolt-ai-integrations/khan-academy-api