Add live captions to a video call app with daily-js

Our great sponsors

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App

InfluxDB - Power Real-Time Data Analytics at Scale

WorkOS - The modern identity platform for B2B SaaS

Our great sponsors

prebuilt-transcription

1 2 0.0 TypeScript

If you are like spoilers and want to see what we’re building today, you can jump straight into the prebuilt-transcription code and also try a live demo

react-window

38 15,254 2.6 JavaScript

React components for efficiently rendering large lists and tabular data

Without this styling for the and its container, Daily Prebuilt defaults to taking up only a small amount of space on the page. You can change the styling however you like and Daily Prebuilt will fit within those constraints.

Note: We are using wrap() to add Daily Prebuilt to an existing </code>, but you could also use the <a href="https://docs.daily.co/reference/daily-js/factory-methods/create-frame"><code>createFrame</code></a> method to make a new <code><iframe></code>, style that frame, and add it to the page. <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--U9jJGgBM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.daily.co/blog/content/images/2022/04/transcription2.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--U9jJGgBM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.daily.co/blog/content/images/2022/04/transcription2.png" alt="Video call UI when a token or call owner is not present and transcription can't be used" loading="lazy" width="880" height="499"></a> <h2> <a name="transcription-component" href="#transcription-component"> </a> Transcription component </h2> Now that we have Daily Prebuilt loaded on the page, let’s start implementing transcription by adding a component to store our buttons and transcript. From our <code>[room].tsx</code>, we reference the <code>Transcription</code> component and pass some managed state to the component: <ul> <li> <code>callFrame</code>: passes the Daily call frame object, which allows the component to start and stop transcription</li> <li> <code>newMsg</code>: sends each new transcripted message to the component for showing the text in the transcript window</li> <li> <code>owner</code>: this boolean tells the component whether the current user is or isn’t a <a href="https://docs.daily.co/reference/rest-api/meeting-tokens#participant-details-meeting-permissions-and-available-features">room owner</a> </li> <li> <code>isTranscribing</code>: this boolean tells the component that Daily is or isn’t currently transcribing. </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> <Transcription callFrame={callFrame} newMsg={newMsg} owner={isOwner} isTranscribing={isTranscribing} /> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> In our <code>Transcription</code> component (defined in <code>components/Transcription.tsx</code>), we have a button that toggles the option to start or stop transcription based on whether transcription is currently active according to Daily (we’ll come back to that in a second): <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><button disabled={!owner} onClick={() => { isTranscribing ? stopTranscription() : startTranscription(); }} > {isTranscribing ? "Stop transcribing" : "Start transcribing"} </button> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> If the meeting participant is not an owner, this button will be disabled along with a message explaining that only meeting room owners can start transcription. This button utilizes these two simple functions: <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> async function startTranscription() { callFrame?.startTranscription(); } async function stopTranscription() { callFrame?.stopTranscription(); } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> How do these functions know if transcription is happening or not? For that, we jump back to <code>[room].tsx</code>. Earlier in the post, we looked at the basic structure of the <code>startCall</code> function. In our demo, this function also has a few lines dedicated to Daily event listeners. We are listening to a few Daily-emitted events that help us shape the video call experience. Two of these events are <a href="https://docs.daily.co/reference/daily-js/events/transcription-events#transcription-started"><code>transcription-started</code></a> and <a href="https://docs.daily.co/reference/daily-js/events/transcription-events#transcription-stopped"><code>transcription-stopped</code></a> events. When those events are emitted, we know to update the React state to set <code>isTranscribing</code> to its correct boolean value. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> newCallFrame.on("transcription-started", () => { setIsTranscribing(true); }); newCallFrame.on("transcription-stopped", () => { setIsTranscribing(false); }); </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> Note: You can also use our new <a href="https://www.daily.co/blog/introducing-the-new-daily-react-hooks-library/">Daily React Hooks</a> library to more quickly connect your React-based app with Daily’s JavaScript API! <h2> <a name="adding-transcription" href="#adding-transcription"> </a> Adding transcription </h2> Now that we are able to start and stop transcription, we need to add the transcripts to the page. Our transcripts come in from Daily via an <a href=""><code>”app-message”</code></a> event. For that, we need another event listener within our <code>startCall</code> function. This checks whether each <code>”app-message”</code> came from the ID of “transcription” and whether it is a full sentence (that’s what <code>data.is_final</code> is doing below). When we have a message, we save the message as an object with the author’s username, the text transcription, and a timestamp. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> newCallFrame.on( "app-message", (msg: DailyEventObjectAppMessage | undefined) => { const data = msg?.data; if (msg?.fromId === "transcription" && data?.is_final) { const local = newCallFrame.participants().local; const name: string = local.session_id === data.session_id ? local.user_name : newCallFrame.participants()[data.session_id].user_name; const text: string = data.text; const timestamp: string = data.timestamp; if (name.length && text.length && timestamp.length) { setNewMsg({ name, text, timestamp }); } } } ); </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> We need some React state to hold messages, so we set up a <code>const</code> where we instantiate this state as an empty array to hold incoming message objects. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>const [messages, setMessage] = useState<Array<transcriptMsg>>([]); </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> This is essentially all that needs to be done to get transcription on the page. You can loop through this array of messages and add them to the screen, or you can add each new message to the screen as it arrives. However, there’s one extra step worth taking to optimize your app for all of these messages, and we’ll see how that works in the next section. Note: Transcript messages are ephemeral. They are only available for the message the user has received while they are in the room. If you refresh your page, you’ll lose the transcripts. Similarly, new users will only see a transcript for conversations that have taken place since they’ve joined and not a history. <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OFCHaJHp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://www.daily.co/blog/content/images/2022/04/transcription3.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OFCHaJHp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://www.daily.co/blog/content/images/2022/04/transcription3.gif" alt="Transcribed text scrolling up and down" loading="lazy" width="430" height="157" data-animated="true"></a> <h2> <a name="optimize-your-window" href="#optimize-your-window"> </a> Optimize your window </h2> Seeing transcripts appear on the screen is super fun, but it can quickly slow down browser windows with the addition of so many DOM elements getting added to the screen. Below, we’ll cover not just how we add transcript messages to our page, but also how to do it in a way that is efficient and not overwhelming to anyone’s browser. To help with this, we need to add two dependencies to our app: <a href="https://www.npmjs.com/package/react-window"><code>react-window</code></a> and <a href="https://www.npmjs.com/package/react-virtualized-auto-sizer"><code>react-virtualized-auto-sizer</code></a>. These libraries help us by loading only the most recent messages. Instead of loading the entire array of message objects as HTML, the DOM only loads the small part of the data set visible in the window. This virtualization technique prevents poor performance caused by an overloaded browser tab holding too much data in memory. Users can still scroll up and see previous messages which are loaded as needed when requested. We have established <code>const</code>s for the transcript list and rows that instantiate as empty objects. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> const listRef = useRef<any>({}); const rowRef = useRef<any>({}); </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> We add new messages received from the parent <code>[room]</code> page to an array. We also have a small function that keeps the array of messages moving to the bottom (most recent) element every time a message is received. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> useEffect(() => { setMessage((messages: Array<transcriptMsg>) => { return [...messages, newMsg]; }); }, [newMsg]); useEffect(() => { if (messages && messages.length > 0) { return () => { scrollToBottom(); }; } }, [messages]); </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> For each row, we call a formatting function. It structures the transcript in the style of “Message Author: Message Text” on the left and Timestamp trimmed to a local time only on the right (styled with CSS, the handy-dandy <code>float:right</code>). <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> function Row({ index, style }: rowProps) { const rowRef = useRef<any>({}); useEffect(() => { if (rowRef.current) { setRowHeight(index, rowRef.current.clientHeight); } }, [rowRef]); return ( <div style={style}> {messages[index].name && ( <div ref={rowRef}> {messages[index].name}: {messages[index].text} <span className={styles.timestamp}> {new Date(messages[index].timestamp).toLocaleTimeString()} </span> </div> )} </div> ); } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> Our rendered transcript block then looks like this, with each loaded row wrapped in the <code>react-window</code> List and <code>react-virtualized-auto-sizer</code> AutoSizer elements. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><AutoSizer> {({ height, width }) => ( <List height={height} width={width} itemCount={messages.length} itemSize={getRowHeight} ref={listRef} > {Row} </List> )} </AutoSizer> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <h2> <a name="download" href="#download"> </a> Download </h2> The transcripts collected in this app are not available after the call concludes, so downloading them is helpful if you want to use them later. To do that, we need to prepare a chat file with all of the text, not just the text currently virtualized on the screen. We have already seen that we are using React state to collect and set messages. For preparing a plain text file with the transcript inside, we will add a <code>transcriptFile</code> state that instantiates as an empty string. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code>const [transcriptFile, setTranscriptFile] = useState<string>(""); </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> Next, let’s set up a <code>useEffect</code> to style the transcript in a way that works best for reviewing later. Unlike the live transcript where we have the timestamp on the right and set to local time only, this includes the full timestamp and date for every message. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> /* Allow user to download most recent full transcript text */ useEffect(() => { setTranscriptFile( window.URL.createObjectURL( new Blob( messages.map((msg) => msg.name ? `${msg.timestamp} ${msg.name}: ${msg.text}\n` : `Transcript\n` ), { type: "octet/stream" } ) ) ); }, [messages]); </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> This link will get the most recent full transcript and by default save it as a file called <code>transcript.txt</code>, although this can be changed later by the user. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><a href={transcriptFile} download="transcript.txt"> Download Transcript </a> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <h2> <a name="conclusion" href="#conclusion"> </a> Conclusion </h2> And there you have it! Using Daily Prebuilt and our new Transcription API with Deepgram, it’s not too much work to add a live transcript to your meetings. From what we’ve shown in this demo, you can easily add different styles (including to the Daily Prebuilt window itself by <a href="https://docs.daily.co/guides/daily-prebuilt-features/customizing-daily-prebuilt-calls-with-color-themes#main">customizing with your own color themes</a>) We would love to see what you’ve built using Daily. Reach out to us anytime at <a href="//mailto:[email protected]">[email protected]</a>!

SurveyJS

surveyjs.io sponsored

Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Next.js

2,040 120,313 10.0 JavaScript

The React Framework

This demo is based on the Next.js React framework, starting with the create-next-app template builder. This tutorial also uses TypeScript. If you are new to TypeScript, no worries! Because it’s built on top of JavaScript, it looks very similar with a few additional features and syntax.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project