Building a YouTube Video Downloader with React.js with TechLearn India

Building a YouTube Video Downloader with React.js with TechLearn India


2 min read


In this tutorial of TechLearn India, we'll walk through the process of creating a simple YouTube video downloader using React.js. We'll leverage the power of React to build a user-friendly interface and use a third-party library called ytdl-core to handle the actual downloading of YouTube videos.


Before we begin, make sure you have Node.js and npm installed on your machine. You can check their installation by running node -v and npm -v in your terminal.

Step 1:

Create a new React App Open your terminal and run the following commands to create a new React app:

npx create-react-app youtube-downloader
cd youtube-downloader

Step 2:

Install Dependencies Install the ytdl-core library, which will help us with YouTube video downloading.

npm install ytdl-core

Step 3:

Create Components Replace the contents of src/App.js with the following code:

import React, { useState } from 'react';
import ytdl from 'ytdl-core';

function App() {
  const [url, setUrl] = useState('');
  const [videoInfo, setVideoInfo] = useState(null);

  const getVideoInfo = async () => {
    try {
      const info = await ytdl.getInfo(url);
    } catch (error) {
      console.error('Error fetching video info:', error.message);

  const downloadVideo = () => {
    if (videoInfo) {
      const videoStream = ytdl(url, { quality: 'highest' });
      videoStream.pipe(res); // Replace "res" with the logic to handle the downloaded video (e.g., save to disk).

  return (
    <div className="App">
      <h1>YouTube Video Downloader</h1>
        Enter YouTube Video URL:
          onChange={(e) => setUrl(}
      <button onClick={getVideoInfo}>Get Video Info</button>

      {videoInfo && (
          <h2>Video Information</h2>
          <p>Title: {videoInfo.videoDetails.title}</p>
          <p>Author: {}</p>
          <p>Duration: {videoInfo.videoDetails.lengthSeconds} seconds</p>
          <button onClick={downloadVideo}>Download Video</button>

export default App;

Step 4:

Run your App Save the changes and run your app using:

npm start

Visit http://localhost:3000 in your browser, and you should see your YouTube Video Downloader in action.


  • We've created a simple React component (App) that maintains the YouTube video URL in its state.

  • The ytdl-core library is used to fetch video information (getVideoInfo) and download the video (downloadVideo).

  • The fetched video information is displayed on the UI, and a button is provided to initiate the video download.

Note: Handling the actual download logic may vary based on your application's requirements (e.g., saving to disk, streaming, etc.). In this example, the download logic is a placeholder (videoStream.pipe(res)), and you'll need to replace it with your specific implementation.

Remember to respect YouTube's terms of service and use the downloaded videos responsibly.

Did you find this article valuable?

Support TechLearn India by becoming a sponsor. Any amount is appreciated!