React has been around for over ten years now, and thanks to its status as the most popular front-end framework, its ecosystem keeps growing and evolving. While React itself focuses just on the UI layer, most real world apps need more functionalities like data fetching, state management, form handling, animations, and routing.

This is why a mature ecosystem matters, you don’t need to learn or code everything. There are many reliable and helpful tools that you can use right away.

Here are 8 tools and libraries that I think every React developer should know about. Whether you’re just starting out or you’ve built production apps, these tools can save you time, reduce bugs, and make your codebase much more maintainable.

Let’s dive in 🚀

Quick Note: React PDF for Document Viewing

Before we dive into the eight tools, a quick shout-out to React PDF Kit.

If your React app needs to display PDF documents, React PDF makes it straightforward. Drop in the viewer component, point it at a file, and you are done. It handles responsive layouts out of the box, giving you full control over theming, and plays nicely with Next.js. Worth keeping on your radar as you build out your toolkit.

Now, on to the main list. 😊

1. TanStack Query: Server State Done Right

If you still use useEffect and useState to get data from your API, TanStack Query will change how you see it.

Server state and client state are not the same. Server state is async, it can go stale without you knowing and multiple components might need the same data at the same time. TanStack Query helps you manage all of this. It takes care of things like caching, background refetching, request duplication, pagination, and optimistic updates. You just tell it what to fetch, and TanStack Query will do the rest for you.

What makes it stand out:

• Automatic caching and refetching: Your data stays up to date in the background without extra code.
• Request deduplication: If multiple components of your app ask for the same data, there will be only one API call.
• Built-in loading and error states: You do not have to handle these yourself with useState.
• Great DevTools: Inspect your cache, see what queries are running, and debug issues visually.

Who is it for:

• Any developer who builds a React app that talks to a backend API.
• Teams that need the same data fetching boilerplate in every component.

As of early 2026, TanStack Query has over 48,000 GitHub stars and more than 16 million weekly npm downloads. It is the most popular data fetching library in the React ecosystem by a wide margin.

Learn more on https://tanstack.com/query/latest

2. Zustand: Simple and Powerful State Management

Redux worked, but it had a lot of extra steps. You need action types, action creators, reducers, middleware, and providers. That is a lot to set up just to share some state between components.

Zustand lets you set up a global store with little extra code. You do not need any providers. There are no dispatching actions. All you have to do is create a store, then use the hook you get in any component and that’s all. Components will only re-render if the specific part of state they subscribed to changes, so your app stays fast without additional steps.

What keeps developers coming back:

• Minimal API: You can get up and running with Zustand in minutes, not hours.
• No Provider needed: Just create a store and use it anywhere.
• Selector-based re-renders: Only parts of your app that need the change will update.
• Middleware support: Persistence, logging, and devtools are all built in.

Who is it for:

• Developers who want something lightweight and powerful without the complexity of Redux.
• Teams who want things simple and want to work fast.

As of early 2026, Zustand has over 56,000 GitHub stars and more than 20 million weekly npm downloads. It has gone past Redux Toolkit in adoption, and thegap between them keeps growing.

Learn more on https://zustand.docs.pmnd.rs/

3. React Hook Form: Forms Without the Pain

Forms look easy at first, but that can change as your application or your requirements expand. Validation checks, error messages, dynamic fields, and slow performance from too many re-renders.

React Hook Form helps with this by using uncontrolled components. The form will not cause a re-render every time you type something. The register function connects the ref so React updates only the part that has changed. If you use it with Zod or Yup for schema validation, you get type-safe forms without much work.

What makes it a top choice:

• Performance first: Minimal re-renders even when the forms are large or complex.
• Easy validation: It works well with Zod, Yup, and many other schema tools.
• Mature ecosystem: It has more than 7 million downloads each week and lots of community support.

Who is it for:

• Developers who make any kind of forms, from simple login pages to complex forms with multiple parts.
• Teams that want the forms to work fast and run smoothly.

As of early 2026, React Hook Form has over 44,000 GitHub stars and more than 18 million weekly npm downloads. It remains the most widely used form library in the React ecosystem.

Learn more on https://react-hook-form.com/

4. React Router: The Standard for Client-Side Routing

This will not be a surprise to many people. React Router has been the main routing tool for React apps for years and still going strong in 2026.

It gives you a declarative, component-based routing that feels right in React. Newer versions also let you use loader functions for data loading, nested layouts, set up error boundaries for each route, and lazy loading. These features help you put your data requirements right next to the routes that use them.

What keeps it at the top:

• Routes with JSX: Set up your routes using JSX. It feels like React as it is React.
• Data loading built in: Loaders and actions help you fetch and use data with your routes.
• Nested layouts: Build complex page layouts without prop drilling.
• Lazy loading: Split your app by route for better performance.

Who is it for:

• Any developer who works on a single-page app that has more than one view.
• Teams that make React apps using Vite and need good routing.

As of early 2026, React Router has over 56,000 GitHub stars and more than 25 million weekly npm downloads. With over 3 billion total downloads on npm, it is the most used routing library in the JavaScript ecosystem.

Learn more on https://reactrouter.com/

Quick note: If you use Next.js or Remix (which is now merging with React Router), the routing part is already set up for you.

5. Framer Motion: Animations That Actually Work

CSS transitions can handle the basics. But when you want to add exit animations, layout transitions, or add gestures for interactions, you may start looking for other solutions without needing to develop yourself.

Framer Motion gives you a motion tag that you can use instead of usual HTML tags. You set up your animations in a declarative way using initial, animate, and exit properties. The best part is AnimatePresence, which helps you add animations when components leave the DOM. Normally React clean up unmounted components immediately. Framer Motion waits for the exit animation to end before it removes them, a feature that makes it worth trying.

What developers love about it:

• Exit animations: It can be tough to do this on your own. Framer Motion makes it easy.
• Layout animations: See how elements move smoothly when their spot changes.
• Gesture support: Built-in drag, tap, hover, and scroll animations.
• Orchestration: Stagger child animations and sequence animations with less work.

Who is it for:

• Developers who need to deliver intricate animations for their projects or systems.
• Teams making apps where micro-animations make a real difference to the user experience.

As of early 2026, Framer Motion (now also known as Motion) has over 30,000 GitHub stars and more than 23 million weekly npm downloads. It is the fastest growing animation library in the JavaScript world.

Learn more on https://motion.dev/

6. shadcn/ui: Own Your Components

This one is not like the usual library you might use. With shadcn/ui, you do not need to install any other package. You can copy what you need right into your own project using a command in the CLI. You own the code and you can customize it however you want. There is no need to worry about breaking changes when the library gets an update.

It is built using Radix UI for accessibility and styled with Tailwind CSS. Want to change how a look works? Just edit the file. There is no need to fork repos, no wrapper components, or struggle with styles.

What makes it compelling:

• Your Code, Your Control: Components live in your project. You can change any part, anytime.
• Accessibility built in: Radix UI takes care of keyboard navigation, focus management, and ARIA attributes.
• Tailwind native: If you use Tailwind CSS, these components feel right at home.
• Fast CLI: You can add new components in seconds.

Who is it for:

• Developers who want to own their UI code but do not want to build from the ground up.
• Teams building custom design systems who need good starting points.
• Tailwind CSS users who want out-of-the-box, accessible components.

As of January 2026, shadcn/ui has almost 106,000 GitHub stars. It also gets over 1 million weekly npm downloads each week.

Learn more on https://ui.shadcn.com/

7. Zod: One Schema to Rule Them All

Zod is not made specifically for React, but it is now an important library used in the React ecosystem. It is a library for schema validation that is TypeScript-first. You define the shape of your data once, and from that you get runtime validation and TypeScript static typing when you write your code. You do not have to worry about a mismatch between your types and what your code checks.

The reason this is so important in React is because of the integrations. React Hook Form uses an official Zod resolver. TanStack Form also works with it by using the standard schema setup. In Next.js, server actions often use Zod to validate your inputs. A single schema definition can cover your forms, API replies, environment variables, and more.

What sets it apart:

• Define once, use everywhere: You can use your schema for runtime validation and also your TypeScript type.
• Works with your existing tools: This works with React Hook Form, TanStack Form, Next.js, tRPC, and more.
• Great error messages: You get clear error messages right away, and you can customize them if you want.
• Zero dependencies: Lightweight with a small footprint.

Who is it for:

• Any TypeScript developer who wants runtime validation and make sure it matches their type definitions.
• Teams who are maintain growing or complex systems that want to avoid separate types and inconsistent validation logics.

As of early 2026, Zod has over 40,000 GitHub stars and more than 89 million weekly npm downloads. With the release of Zod 4, adoption has grown even faster, and it shows no signs of slowing down.

Learn more on https://zod.dev/

8. Vite: The Build Tool That Just Works

If you still use Create React App to start React projects, it might be a good idea to switch. Vite is now the default tool, and you can feel the change right away when you start a development server.

Vite works with native ES modules and esbuild for a quick startup. The dev server starts in just milliseconds, regardless of how big your project is. Hot module replacement updates your browser so fast, you see changes almost as soon as you save your file. When you build for production, Vite uses Rollup under the hood. This makes sure you get bundles that are better and smaller with tree-shaking and code splitting without any extra configuration.

What makes it the go-to choice:

• Fast dev server: There is no wait for your project to compile on startup.
• Lightning fast HMR: When you make changes, they show up in the browser almost immediately.
• Simple configuration: The default settings are good as they are. You rarely need to change them.
• Plugin ecosystem: You can use path aliases, SVG imports, PWA support, and more.

Who is it for:

• Every developer starting a new standalone React project.
• Teams that need a fast and steady build tool, and want it to be simple to use.

As of early 2026, Vite has over 78,000 GitHub stars and more than 53 million weekly npm downloads. It has become the default build tool for most JavaScript frameworks, not just React.

Learn more on https://vite.dev/

Quick note: If you use Next.js or Remix, you do not have to worry about bundling. It is already handled for you.

Conclusion

So, which tools should you pick for your next React project? Here is a quick recap:

• Go with Vite for your build tool. It is fast, simple, and the default for good reason.
• Use React Router for client-side routing in standalone React apps.
• Pick TanStack Query for anything that involves fetching data from a server.
• Choose Zustand for client-side state that needs to be shared across components.
• Reach for React Hook Form when you need forms that perform well and validate cleanly.
• Add Zod to define your data shapes once and get both types and validation from it.
• Use shadcn/ui when you want accessible, good-looking components that you fully own.
• Bring in Framer Motion when your app needs animations that go beyond CSS transitions.

Although not every tool here will apply to your current project, I hope at least a few of them will be helpful as you build and grow your React apps. And if you’ve come across other interesting tools that make your workflow smoother or solve tricky problems, I’d love to hear about them. Just drop a comment and share what’s working for you!

📢 One More Thing: React PDF Kit

Before you go, I mentioned the React PDF Viewer component earlier. If any of your projects involve rendering PDFs, I would be happy if you could give it a try. We made it so you can view PDFs in React apps easily, with theme customization, responsive layouts, and smooth Next.js integration. No heavy dependencies or complicated configuration to deal with.

Give it a spin if it fits your use case. Your support helps us keep the library growing and lets us continue putting out content for the React community 🙏

Now go build something great! 🚀

What are the tools in your React stack? Is there something I did not add to this list? Let me know in the comments. I would like to know what is working for you when you use it.

AI is showing up everywhere these days, and one great use is real-time answers from PDFs. From contracts and manuals to compliance reports, PDFs remain a crucial component in business workflows. But searching for answers or details inside long documents can be tedious and time consuming.

With a PDF AI Chat app, you can:

• Ask questions about a document and get accurate responses fast.
• Highlight text and get context-aware answers from AI.
• Copy key details or insights with one click.

For companies, this can mean faster onboarding, quicker report reviews, and less back-and-forth over document details.

In this walkthrough, we'll cover how to build a PDF chat app that let users talk to an AI about the contents of any PDF, right inside a web browser. If you’re a React.js developer wanting to explore document chat workflows, you’ll find this tutorial practical.

Here's a list of tools you’ll need:

1. Next.js for the app framework
2. React PDF Kit to show PDFs directly in the browser
3. OpenAI for the chat backend
4. Tailwind CSS for easy styling

A quick introduction about us. React PDF lets you display PDF files directly inside your React.js or Next.js projects. With more than 20 built-in features like a default toolbar, easy customization and responsive layouts, your users can view and work with PDFs without leaving your app.

You can add a React PDF Viewer component to all kinds of projects. Use it in document systems, workflow tools, AI apps or as a simple PDF reader. It's flexible and fits right in wherever you need to show or manage PDF files.

Part 1 - Set up Your App

Step 1: Initialize a new Next.js project with Tailwind CSS:

npx create-next-app@latest

Step 2: Install required libraries:

npm install @pdf-viewer/react eventsource-parser openai react-markdown

Here's what each does:

• @pdf-viewer/react: Display PDFs in your app.
• eventsource-parser: Handle event streams for live AI responses.
• openai: Connect to the OpenAI API.
• react-markdown: Render markdown content from AI replies.

Part 2 - Set Up a PDF Viewer Infrastructure

Start by creating a provider and React PDF Viewer component using @pdf-viewer/react. The library lets users open and read PDFs inside your app, with features like built-in toolbars and a responsive design. It works with both simple readers and advanced workflows.

Step 1: Create a PDF Provider Component

// AppProviders.tsx
"use client";
import { RPConfig, RPConfigProps } from "@pdf-viewer/react";
import { type PropsWithChildren } from "react";

function AppProviders({
  children,
  ...props
}: PropsWithChildren<RPConfigProps>) {
  return <RPConfig {...props}>{children}</RPConfig>;
}
export default AppProviders;

Step 2: Create a React PDF Viewer Component

// AppPdfViewer.tsx
"use client";
import { RPProvider, RPDefaultLayout, RPPages } from "@pdf-viewer/react";
import { Ref } from "react";

const AppPdfViewer = ({ ref }: { ref?: Ref<HTMLDivElement> }) => {
  return (
    <div ref={ref}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout style={{ height: "100vh" }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </div>
  );
};

export default AppPdfViewer;

Step 3: Dynamically Import Viewer Components for Client-Side Rendering

Since PDF.js workers must be run on client-side only, you can use next/dynamic to import your PDF components to prevent SSR errors.

// LazyAppPdfViewer.tsx

"use client";
import dynamic from "next/dynamic";

const LazyAppPdfViewer = dynamic(() => import("./AppPdfViewer"), {
  ssr: false,
});
export default LazyAppPdfViewer;

// LazyAppProviders.tsx
"use client";
import dynamic from "next/dynamic";

const LazyAppProviders = dynamic(() => import("./AppProviders"), {
  ssr: false,
});
export default LazyAppProviders;

Step 4: Configure Layout with Providers

Apply the PDF provider globally via your layout.tsx file.

// layout.tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="antialiased">
        <LazyAppProviders licenseKey="your-license-key">
          {children}
        </LazyAppProviders>
      </body>
    </html>
  );
}

For more information on how to use React PDF, check out the Basic usage guide.

Part 3: Create a Main Application Layout

To make the chat experience smooth, you’ll want these 4 components:

• Dropdown for text selection
• Loading indicator
• Chat input
• Chat interface

Create Four Supporting Components

Step 1: Dropdown for Text Selection Component

Pop up when users highlight text in the PDF. Options include “Ask” (send a question about the selected text to AI) and “Copy” (save the text to clipboard)

// SelectDropDown.tsx

import { useCallback } from "react";

interface SelectDropDownProps {
  position: {
    x: number;
    y: number;
  };
  show: boolean;
  onAsk: () => void;
  onCopy: () => void;
}

export const SelectDropDown = ({
  position,
  show,
  onAsk,
  onCopy,
}: SelectDropDownProps) => {
  const handleAsk = useCallback(() => {
    onAsk();
  }, [onAsk]);
  const handleCopy = useCallback(() => {
    onCopy();
  }, [onCopy]);

  if (!show) return null;

  return (
    <div
      className="absolute"
      style={{ top: `${position.y}px`, left: `${position.x}px` }}
    >
      <ul className="bg-white border border-gray-200 rounded-md p-2">
        <li className="cursor-pointer hover:bg-gray-100" onClick={handleAsk}>
          Ask
        </li>
        <li className="cursor-pointer hover:bg-gray-100" onClick={handleCopy}>
          Copy
        </li>
      </ul>
    </div>
  );
};

Step 2: Loading Indicator Component

This appears when the AI is working on a response

// LoadingIcon.tsx

export const LoadingIcon = () => {
  return (
    <svg
      width="1em"
      height="1em"
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="#555555"
        strokeWidth="10"
        fill="none"
        strokeLinecap="round"
        strokeDasharray="209.44"
        strokeDashoffset="0"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 50 50"
          to="360 50 50"
          dur="1s"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
  );
};

Step 3: Chat Input Component

Let's users send questions, either based on selected text or general queries about the document.

// Input.tsx

"use client";
import { useCallback, Ref, useRef } from "react";

interface InputProps {
  onSubmit?: (value: string) => void;
  onClearContext?: () => void;
  ref?: Ref<HTMLDivElement>;
  context?: string;
}

export const Input = ({
  ref,
  onSubmit,
  context,
  onClearContext,
}: InputProps) => {
  const inputRef = useRef<HTMLDivElement>(null);

  const handleSubmit = useCallback(() => {
    const textValue = inputRef.current?.innerText;
    if (onSubmit && textValue) {
      onSubmit(textValue);
      inputRef.current!.innerText = "";
    }
  }, [onSubmit]);

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent<HTMLInputElement>) => {
      // if press Enter only it will send question to server
      // allow new line by shift + enter
      if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault();
        handleSubmit();
      }
    },
    [handleSubmit]
  );

  return (
    <div ref={ref} className="p-1">
      {context && (
        <div className="text-sm border-t border-gray-300 px-2">
          <div className="flex justify-between">
            Ask about:{" "}
            <span onClick={onClearContext} className="cursor-pointer">
              X
            </span>
          </div>
          <div className="text-gray-500">{context}</div>
        </div>
      )}
      <div className="flex border-t border-gray-300">
        <p
          ref={inputRef}
          className="w-3/4"
          contentEditable
          suppressContentEditableWarning
          onKeyDown={handleKeyDown}
        ></p>
        <button
          onClick={handleSubmit}
          className="w-1/4 border-l border-gray-300"
        >
          Submit
        </button>
      </div>
    </div>
  );
};

Step 4: Chat Interface Component

This component manages the entire conversation:

• Shows Q&A messages
• Streams answers in real time
• Updates dynamically with markdown formatting
• Adjusts height responsively based on the input area

// Chat.tsx

"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { Input } from "./Input";
import Markdown from "react-markdown";
import { LoadingIcon } from "./LoadingIcon";
import { EventSourceParserStream } from "eventsource-parser/stream";

// message item for question and answer
const Item = ({
  type,
  content,
}: {
  type: "question" | "answer";
  content: string;
}) => {
  return (
    <div
      className={`flex ${
        type === "question" ? "justify-end" : "justify-start"
      } w-full`}
    >
      <div
        className={`px-2 max-w-2/3 my-2 py-1 rounded ${
          type === "question" ? "bg-neutral-200" : "bg-neutral-400"
        }`}
      >
        {/* render markdown content that will be received from ai */}
        <Markdown>{content}</Markdown>
      </div>
    </div>
  );
};

interface ChatProps {
  context?: string;
  onClearContext?: () => void;
}

export const Chat = ({ context, onClearContext }: ChatProps) => {
  const [inputRef, setInputRef] = useState<HTMLDivElement | null>(null);
  const [messages, setMessages] = useState<
    { id: string; type: "question" | "answer"; content: string }[]
  >([]);
  const [loading, setLoading] = useState(false);
  const messageRef = useRef<string>("");
  const currentMessageIndexRef = useRef<number>(0);
  const [conversationHeight, setConversationHeight] = useState<string>("100vh");

  useEffect(() => {
    if (!inputRef) return;
    const observer = new ResizeObserver((entries) => {
      setConversationHeight(`calc(100vh - ${entries[0].contentRect.height}px)`);
    });
    observer.observe(inputRef);
    return () => {
      observer.disconnect();
    };
  }, [inputRef]);

  const handleSubmit = useCallback(
    async (value: string) => {
      setLoading(true);
      messageRef.current = "";
      setMessages((prev) => {
        // set message index to be appended when answer is received
        currentMessageIndexRef.current = prev.length + 1;
        return [
          ...prev,
          { id: Date.now().toString(), type: "question", content: value },
        ];
      });
      if (onClearContext) {
        onClearContext();
      }
      // get message from openai
      const response = await fetch("/api/ai", {
        method: "POST",
        body: JSON.stringify({ question: value, context }),
        headers: {
          "Content-Type": "application/json",
        },
      });
      // read event stream
      const reader = response.body
        ?.pipeThrough(new TextDecoderStream())
        .pipeThrough(new EventSourceParserStream())
        .getReader();
      try {
        while (true) {
          if (!reader) {
            throw new Error("Reader is not defined");
          }
          const { done, value } = await reader.read();
          if (done || value.data === "[DONE]") {
            reader.cancel();
            break;
          }
          const newMessage = value.data;
          // append new message to the current message
          messageRef.current = messageRef.current + newMessage;
          setMessages((prev) => {
            if (prev[currentMessageIndexRef.current]) {
              return prev.map((message, index) => {
                if (index === currentMessageIndexRef.current) {
                  return {
                    ...message,
                    content: messageRef.current,
                  };
                }
                return message;
              });
            }
            return [
              ...prev,
              {
                id: Date.now().toString(),
                content: messageRef.current,
                type: "answer",
              },
            ];
          });
        }
      } catch (error) {
        console.error(error);
      }
      setLoading(false);
    },
    [context, onClearContext]
  );

  return (
    <div className="h-full relative">
      {loading && (
        <div className="w-full h-full bg-neutral-400/30 absolute inset-0 flex items-center justify-center">
          <div className="spin text-5xl">
            <LoadingIcon />
          </div>
        </div>
      )}
      <div
        className="overflow-y-auto"
        style={{
          height: conversationHeight,
        }}
      >
        <div className="p-1">
          {messages.map((ele) => (
            <Item key={ele.id} type={ele.type} content={ele.content} />
          ))}
        </div>
      </div>
      {/* avoid rerender when input height change due to new line */}
      <div className="absolute bottom-0 w-full">
        <Input
          context={context}
          onSubmit={handleSubmit}
          onClearContext={onClearContext}
          ref={setInputRef}
        />
      </div>
    </div>
  );
};

Step 5: Combine PDF Viewer and Chat Interface

At this stage, you’ll combine everything into a unified experience:

• The PDF viewer will appear on the left.
• The chat interface on the right.
• When users highlight text, they’ll see a dropdown menu near their selection with contextual actions like Ask or Copy.

Hooks will be used to handle events like text selection and menu placement. Make sure the chat input and dropdown feel responsive by tracking which text is active and when to show menus.

// PdfChat.tsx

"use client";
import LazyAppPdfViewer from "./LazyAppPdfViewer";
import { Chat } from "./Chat";
import { useCallback, useEffect, useState } from "react";
import { SelectDropDown } from "./SelectDropDown";

export const PdfChat = () => {
  const [pdfViewer, setPdfViewer] = useState<HTMLDivElement | null>();
  const [selectedText, setSelectedText] = useState<string>();
  const [menuPosition, setMenuPosition] = useState<{ x: number; y: number }>({
    x: 0,
    y: 0,
  });
  const [showDropdown, setShowDropdown] = useState<boolean>(false);
  const [context, setContext] = useState<string>();

  const handleMouseUp = useCallback(() => {
    const selection = window.getSelection(); // Get current selection
    const selectedString = selection?.toString(); // Convert to string
    const selectedRange = selection?.getRangeAt(0); // Get the range object

    // Set selected text so we can use it later
    setSelectedText(selectedString);

    // If there's valid selection, show dropdown
    if (selectedString && selectedString.trim().length > 0 && selectedRange) {
      const rangeBounds = selectedRange.getBoundingClientRect();
      // Position the dropdown near the selection
      setMenuPosition({
        x: rangeBounds.left + window.scrollX,
        y: rangeBounds.bottom + window.scrollY,
      });
      setShowDropdown(true);
    } else {
      setShowDropdown(false);
    }
  }, []);

  const handleAsk = useCallback(() => {
    setContext(selectedText);
    setShowDropdown(false);
  }, [selectedText]);

  const handleCopy = useCallback(() => {
    if (selectedText) {
      window.navigator.clipboard.writeText(selectedText);
    }
    setShowDropdown(false);
  }, [selectedText]);

  useEffect(() => {
    pdfViewer?.addEventListener("mouseup", handleMouseUp);

    return () => {
      pdfViewer?.removeEventListener("mouseup", handleMouseUp);
    };
  }, [handleMouseUp, pdfViewer]);

  return (
    <>
      <div className="col-span-2 relative">
        <LazyAppPdfViewer ref={setPdfViewer} />
        <SelectDropDown
          position={menuPosition}
          show={showDropdown}
          onAsk={handleAsk}
          onCopy={handleCopy}
        />
      </div>
      <div className="col-span-1">
        <Chat context={context} onClearContext={() => setContext(undefined)} />
      </div>
    </>
  );
};

Part 4 - Create an API to Connect with OpenAI

Now that the UI is complete, we’ll build an API route that connects your app to OpenAI. This backend route will:

• Accept questions and optional context (like highlighted text).
• Send those to the OpenAI API with an appropriate prompt
• Stream the AI’s response back to the frontend in real-time

This gives users a fast, interactive experience where answers appear as they’re generated.

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_KEY,
});

export async function POST(request: Request) {
  const { question, context } = await request.json();
  if (!question) {
    return new Response("No question", { status: 400 });
  }
  try {
    const prompt = context
      ? `
    From this content:
    ${context}
    Question: ${question}
    `
      : question;

    const encoder = new TextEncoder();
    const customReadable = new ReadableStream({
      start(controller) {
        openai.responses
          .stream({
            model: "gpt-4.1-nano",
            input: prompt,
          })
          // send delta to client
          .on("response.output_text.delta", (event) => {
            controller.enqueue(encoder.encode(`data: ${event.delta}\n\n`));
          })
          // send done to client
          .on("response.output_text.done", () => {
            controller.enqueue(encoder.encode("data: [DONE]\n\n"));
            controller.close();
          });

        // Clean up on connection close
        request.signal.addEventListener("abort", () => {
          // clearInterval(intervalId);
          controller.close();
        });
      },
    });

    return new Response(customReadable, {
      headers: {
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
        Connection: "keep-alive",
      },
    });
  } catch (error) {
    console.error(error);
    return new Response("Error", { status: 500 });
  }
}

Demo

Here’s what the final app looks like in action:

For the complete example with full codes, check out Stackblitz.

Conclusion

In this tutorial, we've built a simple PDF viewer application with AI chat by using Next.js, OpenAI, and React PDF. By combining modern web technologies, we created a practical tool that enhances document interaction and understanding:

• Quickly get summaries, explanations, or answers about any PDF.
• Avoid endless scrolling or skimming to find info.
• Evaluate answers or insights as needed for reports or messages.

This makes it particularly valuable for professionals who frequently work with PDF documents and need quick insights or clarifications about their content.

With the right React tools and AI, you can unlock new ways to interact with information. If you build something cool or have ideas for new features, share your results with the community!

If you liked this article, take a look at React PDF. It's a React PDF viewer made for React and Next.js projects. No matter if you're new to building apps or handling a larger setup, React PDF is ready to help.

React PDF is built with developers in mind and offers:

• Out-of-the-box features - See the Getting Started guide to get moving fast
• Plenty of ways to customize - Check out options to style and tweak its components to fit your needs
• Simple, clear APIs - Dive into the API documentation to see all the details

Your support helps me keep building new tools and writing for React devs. Thanks for giving React PDF a look! 🙏

There has been another year full of new things in the React UI library world. If you have been watching the scene, you know that 2025 brought some notable changes. Shadcn UI got even higher in the rankings. NextUI rebranded to HeroUI. At the same time, big libraries like MUI and Ant Design kept putting out updates to stay ahead.

Looking back at my 2025 roundup, I see that the main names are still doing well. A few new ones have also made their mark. Accessibility has shifted from a good-to-have to an absolute must-have.

Whether you are starting a new project or making changes to your stack, picking the right UI library for 2026 is about what fits best with how you work. Let us look at what is popular, what has worked well, and what you should keep in mind this year. 🚀

📄 Quick Note: React PDF Kit for Document Viewing

Before we start talking about the best UI libraries, a quick mention of React PDF Kit.

If you need to view PDF documents in your React app, this tool makes it easy. You can just add the React PDF Viewer component, link your PDF, and that’s it. It works well on different screen sizes, you can change its style, and it is a good fit with Next.js.

When you are looking at ui libraries, React PDF is one you should not miss.

Alright, let’s talk about the libraries you came here for. 😊

Leading React.js UI Libraries in 2026

Each library you see here stands out with its own style and benefits. These five libraries are at the top in the React ecosystem this year. They are ranked based on weekly npm downloads and GitHub stars.

1. Material-UI (MUI) and Its Continued Dominance

This will not be news for many people. Material-UI, or MUI for short, is still the top choice when it comes to React UI libraries. There are many good reasons for this. It is built around Google’s Material Design principles. MUI gives you clean, good-looking components you can use right away. Each part is ready to go and looks good out of the box.

What keeps MUI at the top:

• Easy Customization: You can change things like themes, colors, and text styles in MUI with little effort. It does not matter if you want a classic feel like Material Design or you have a new look in mind. MUI lets you do both without trouble.
• Massive component selection: Buttons, modals, tables, navbars. If you need it, MUI almost certainly has it. Think of it as the all-in-one toolkit for UI development.
• Great community and resources: You get excellent documentation with multiple tutorials, and an engaged community of developers ready to help.
• MUI X for harder jobs: When you are using complex data grids, advanced date pickers, or charts, MUI X has what you want. It delivers enterprise-level components for demanding use cases.

Who is it for:

• Developers who want a mature UI framework that is scalable and usable for any size of project.
• Teams looking for production-ready components that work out of the box and customization options to change them how they like.

As of January 2026, MUI is still at the top. It now has more than 97,000 GitHub stars, and there are over 4.5 million downloads every week. 📈

Learn more on https://mui.com/

2. Shadcn UI: The Year’s Biggest Story

Building on its 2025 success, shadcn/ui is now a top name in the ecosystem. This library has completely reshaped how developers approach component libraries, and the stats back it up.

What makes shadcn/ui so compelling:

• Your Code, Your Control: shadcn/ui is not like other libraries. Here, you copy and paste what you need, right into your own code. The components sit in your project, so you have full control. There are no hidden extra pieces to keep track of, and you do not need to wait for someone else to fix things.
• Standing on Shoulders: It pairs Tailwind CSS for design and Radix UI for accessibility. These two tools work together really well.
• Polished by Default: The components look sharp, feel modern, and they production-ready. Since everything is in your code, you can change whatever you want, anytime.
• Speedy CLI: Adding components to your project is very quick when you use the shadcn CLI. Just run npx shadcn@latest add button and it will be there for you to use.

Who is it for:

• Developers who complete ownership of their UI code but want to skip the tedious groundwork.
• Teams that build custom design systems and need building blocks that are easy to use and built well.
• Tailwind CSS users who want good-looking, ready-made components that slot right in.

As of January 2026, shadcn/ui is one of the fastest-growing projects on GitHub. The project is about to reach 104,000 or more stars on GitHub. People also download it more than 560,000 times on npm each week.

Learn more on https://ui.shadcn.com/

3. Ant Design: A Versatile and Feature-Rich UI Library

Ant Design is more than just for enterprise apps. It is a robust and easy-to-use UI library. You can use it for all types of projects, small or large. It started at Alibaba. and evolved to one of the most used React UI frameworks thanks to its vast components collection, clean looks, and adaptability.

What sets Ant Design apart:

• Extensive component collection: There are a lot of ready-made components you can use for almost any situation. You will see things like date pickers, data tables, and more.
• Flexible theming: It comes with its own look, but you can change the design fast because of the simple token-based theming.
• Global-ready: It works with many languages from the start. This makes it work well for applications with international audience.
• Enterprise-proven: People have used it for the massive scale at Alibaba. So you know it will work under the tough needs of the real world demands.

Who is it for:

• Developers who create enterprise-level apps that need to be scalable with polished interfaces.
• Teams who want a well-made UI framework with clear documentation on how to use it and strong community support.
• Anyone looking for a comphrehensive and solid design system and does not want to start from zero.

As of January 2026, Ant Design keeps doing well. It has a lot of support on GitHub, with over 97,000+ stars. People like to use it, and there are more than 1.7 million weekly downloads.

Learn more on https://ant.design/

4. Chakra UI: Accessibility and Usability First

If Chakra UI is not in your toolkit yet, this could be a good time to try it out. Chakra UI is known for its easy-to-use API and focus on accessibility. With Chakra UI, you can build modern and inclusive React applications without much trouble.

What developers appreciate about Chakra UI:

• Accessibility from the start: Every component ships ready for screen readers and keyboard accessibility. You do not need to do anything extra.
• Intuitive styling system: Chakra UI lets you style things easily with its prop-based setup, without having to write complex CSS.
• Scales with your needs: You can use Chakra UI for quick prototypes or full-scale production apps. It works well for any project you are building.
• Developer-friendly experience: The API is simple, so you read less and build more, shipping features out fast.

Who is it for:

• Developers who want modern, easy-to-use, and clear UI components that let them work without much trouble.
• Teams who need a design system that can grow smoothlly across different projects.

As of January 2026, Chakra UI has over 40,000 GitHub stars. It also gets more than 700,000 downloads every week. This shows that Chakra UI is still strong and people continue to use it a lot.

Learn more on https://chakra-ui.com/

5. HeroUI: Beautiful, Fast, and Modern

HeroUI, previously known as NextUI, rebranded in January 2025. The team changed the name because they started doing more than just working with Next.js. The library is growing fast now. A lot of people like it because it looks good, works well, and was built for contemporary development workflows.

What makes HeroUI special:

• Tailwind at Its Core: HeroUI is built fully with Tailwind CSS. This means you can add it to any new project with ease. If you use Tailwind CSS in your setup, HeroUI will feel right at home.
• Accessibility Included: HeroUI uses React Aria behind the scenes. So, every part follows the right accessibility rules for you.
• Gorgeous Defaults: The pieces are good-looking from the start. You get smooth animations, dark mode support, and a design language that looks high-end.
• Works Everywhere: While HeroUI links back to NextUI, it also works with Vite, Remix, Astro, or any React build.

Who is it for:

• Developers who want easy-to-use and good-looking components that do not need a lot of styling work.
• Teams that use Tailwind CSS and want a component library that fits well with how they work.
• Anyone building modern web applications who wants their sites to look nice and accessible.

As of January 2026, HeroUI has got more than 27,000 stars on GitHub. It also gets over 120,000 downloads on npm each week. The growth is strong, and it does not look like it will slow down soon, with plans new components and support for Tailwind CSS v4.

Learn more on https://heroui.com/

(Bonus) Headless UI: Tailwind’s Perfect Partner

Headless UI works in a different approach. It gives you accessible components that have no built-in styles, so you can make them look how you want. Built by Tailwind Labs, Headless UI support both React and Vue projects. This makes it a good choice if you want accessible components, not just for React, but for other projects.

What draws developers to Headless UI:

• Zero Styling Opinions: You get all the features you want, like menus, dialogs, listboxes, and tabs. It comes with no fixed style, so you can design it any way you like.
• Made for Tailwind: Coming straight from Tailwind Labs, it is built from the ground up to fit right with Tailwind CSS utility classes.
• Bulletproof Accessibility: Each part uses WAI-ARIA best practices right away. It has keyboard navigation, focus control, and works well with screen readers. All these are built in.
• Lean and Purposeful: Headless UI does not try to do everything. It focuses only on those hard, interactive components that are tough to make accessible yourself.

Who is it for:

• The developers who want full styling control but need to keep accessibility in their work.
• The teams that use Tailwind CSS and want good accessible features without fighting built-in styles.
• Anyone making a custom design system who doesn’t want to start over with accessibility.

As of January 2026, Headless UI counts 28,000+ GitHub stars and over 2.6 million weekly downloads.

Learn more on https://headlessui.com/

Conclusion

So, which React.js UI library is best for your next project? Here’s a quick look:

• Go with MUI when you want a mature, professional library that is packed with many components and powerful theming.
• Choose Shadcn UI if you want amazing and accessible components with full code control. It works great for people who use Tailwind.
• Pick Ant Design when building large enterprise applications or when your project needs many features.
• Opt for Chakra UI if you care most about accessibility and usability. It’s good if you want something that scales well.
• HeroUI brings you stylish and Tailwind-native accessible components. It looks good from the start.
• Bonus: Headless UI gives you unstyled, accessible components for both React and Vue.

Each library on this list does well in its own way. The best one for you will depend on what your project needs. Some libraries are fast, some are flexible, and others have strong tools for enterprise use. You will find one here that works for you.

📢 One More Thing: React PDF

I talked about the React PDF Viewer component earlier. I would be happy if you could give it a try. We made it so you can view PDFs in React apps easily, with theme customization, responsive layouts, and smooth Next.js integration. No extra dependencies, no complicated setup.

If you need a library to work with PDF in your project, give it a try! Your support helps us keep improving the library and creating content for the React community 🙏

Now go build something amazing, and may your components always render flawlessly! 🚀

The most exciting time of the year for developers is back again: Black Friday and Cyber Monday 2025! Whether you’re building with React, Vue, Svelte, or Node.js, this is your chance to grab some of the best deals on dev tools, UI libraries, courses, and services that power modern JavaScript development.

If you loved the deals we featured in 2024, you’re in for even better ones this year. From productivity-boosting libraries to hosting, AI tools, and premium resources, we’ve handpicked the top offers that will save you time, level up your projects, and maybe even spark your next big idea.

Let’s dive into the top developer deals of 2025 🚀🔥

🔧 UI Kits, Libraries, and Boilerplates

1. React PDF Kit

If you’re a React developer working with PDFs, React PDF is a must-have library for creating fully customizable, high-performance PDF viewers in your app. With support for theming, responsive layouts, and smooth rendering, it’s perfect for building dashboards, document portals and AI tools. Designed with developers in mind, React PDF makes handling PDFs effortless.

• Deal: 30% OFF Developer License, 40% OFF Organization License
• Period: November 17 — December 2
• Website: React PDF

Disclaimer: I’m part of the team building this product.

2. MDBootstrap

If you’re looking to speed up frontend development across multiple frameworks, MDBootstrap delivers a powerful UI kit that combines Bootstrap 5 with Material Design 2.0. Whether you’re building with React, Vue, Angular, jQuery, or plain Bootstrap, MDBootstrap helps you create modern, responsive interfaces faster with pre-built components, templates, and layouts.

• Deal: up to 98% OFF bundle deals daily
• Period: Live now
• Website: MDBootstrap

3. Next Admin

Building admin panels or internal tools with Next.js? Next Admin offers a modern, fully responsive dashboard UI kit packed with over 200+ professional components, 45+ unique pages, and 5 dashboard layouts. It includes pre-integrated features and services (like charts, tables, auth, and more), helping developers launch production-ready admin UIs faster than ever.

• Deal: 30% OFF (Code: BLFCM2025)
• Period: November 18 — December 2
• Website: NextAdmin

4. TailKit

For developers working with Tailwind CSS, TailKit provides a comprehensive collection of pre-designed UI components and templates that help you build beautiful, responsive web apps in record time. From landing pages to dashboards and everything in between, TailKit gives you the tools to focus on functionality without sacrificing design.

• Deal: 50% OFF limited licenses (Code: BLACKFRIDAY2025)
• Period: November 24 — December 2
• Website: TailKit

5. Vue PDF Viewer

If you’re building with Vue.js and need robust PDF functionality, Vue PDF Viewer is your go-to solution. This powerful, high-performance component enables you to render, display, and annotate PDFs with ease. With built-in support for responsive layouts, custom theming, and annotations, it’s ideal for building modern dashboards, document portals, or AI tools.

• Deal: 30% OFF Viewer licenses, 40% OFF Viewer+Annotation licenses
• Period: November 17 — December 1
• Website: Vue PDF Viewer

Disclaimer: I’m part of the team building this product.

🛠️ Development Tools

6. Codebit

If you love sharing code on social media or in tutorials, Codebit makes it easy to create eye-catching animated videos of your code. Perfect for dev influencers, educators, or product demos, Codebit supports syntax highlighting, animations, and export formats ready for sharing on X, LinkedIn, or your blog.

• Deal: 50% OFF 1-year Professional Plan (Code: BLACKFRIDAY25)
• Period: Now
• Website: Codebit

7. MailTrap

MailTrap is a favorite among developers for its sandboxed email testing, letting you debug and preview emails without hitting real inboxes. It also includes email delivery and infrastructure control, perfect for staging environments or production pipelines.

• Deal: 40% OFF Business annual plan (Code: TRAP40BF)
• Period: November 24 — December 5
• Website: MailTrap

8. MailerLite

MailerLite offers clean, developer-friendly tools to build email automations, landing pages, and signup forms. It’s a popular choice for small teams and indie devs who want modern features without bloated interfaces.

• Deal: 25% OFF annual plans
• Period: November 18 — December 16
• Website: MailerLite

9. Mailchimp

A long-time leader in email marketing, Mailchimp now includes AI-driven insights and behavior-based automation, helping you convert more users with data-backed messaging. It’s ideal for product launches, newsletters, and post-signup engagement.

• Deal: 40% OFF annual plans (Code: MCBF2025)
• Period: November 25 — November 30
• Website: Mailchimp

10. Warmy

Worried your emails are landing in spam? Warmy uses AI algorithms to improve your domain’s email reputation, ensuring higher inbox placement. It’s great for developers running outbound email campaigns, onboarding flows, or transactional messages.

• Deal: 30% OFF annual plan (Code: WARMBF30)
• Period: November 22 — December 4
• Website: Warmy

🌐 Web Optimization and Monitoring

11. OtterWise

OtterWise tracks your codebase’s test coverage, code quality, and more, all with a focus on developer privacy. It’s a great choice for teams who want detailed metrics without giving up control over sensitive data.

• Deal: 75% OFF first month (Code: BLACKFRIDAYDEALSDOTDEV)
• Period: November 1 — December 2
• Website: OtterWise

12. Super Monitoring

Need a one-stop solution for keeping your site in check? Super Monitoring watches for uptime, feature malfunctions, Core Web Vitals issues, SSL expirations, and even search engine blockades. Ideal for frontend devs, SaaS builders, and eCommerce owners who can’t afford downtime.

• Deal: 50% OFF first term (Code: SUPERBLACK25)
• Period: November 24 — December 5
• Website: Super Monitoring

13. Plerdy

Plerdy is a powerful analytics tool for tracking visitor behavior, optimizing conversion rates, and improving user experience. It offers features like heatmaps, session recordings, and SEO analysis to help developers and marketers make data-driven decisions for their websites.

• Deal: 50% OFF (Code: plerdyBF2025)
• Period: Now — December 3
• Website: Plerdy

14. StatusGator

StatusGator is a unified status monitoring tool that aggregates the status of all your cloud services into one platform. Ideal for keeping track of service outages, it helps developers and teams stay informed about downtime across their tech stack.

• Deal: 20% OFF monthly and annual Starter plans (Code: BLACKFRIDAY2025)
• Period: November 2 — December 2
• Website: StatusGator

15. NitroPack

NitroPack is a powerful all-in-one performance optimization platform that improves your Core Web Vitals, load speed, and overall SEO. It handles everything from caching to minification, lazy loading, and image optimization — without needing multiple plugins or custom setups.

• Deal: 30% OFF monthly and annual plans (Code: CYBERMONTH2025 / CYBERYEAR2025)
• Period: November 12 — December 12
• Website: NitroPack

🔒 Hosting and Security

16. Hostinger

Hostinger is known for offering reliable, developer-friendly web hosting at unbeatable prices. Whether you’re launching a portfolio, a landing page, or a lightweight web app, it supports modern tech stacks with Git integration, PHP & Node.js support, and managed WordPress hosting, all with fast global performance.

• Deal: up to 85% OFF
• Period: Live now
• Website: Hostinger

17. Cloudways

Cloudways offers a developer-friendly cloud hosting platform that takes the complexity out of infrastructure management. Powered by DigitalOcean, it’s perfect for hosting Node.js apps, headless CMS, eCommerce stores, and API services, with built-in features like staging environments, firewall security, and 1-click scaling.

• Deal: 50% OFF first 3 months
• Period: Limited-time offer
• Website: Cloudways

18. CrowdStrike

CrowdStrike is a leader in cloud-native cybersecurity, offering real-time threat detection, endpoint protection, and breach prevention powered by AI. It’s trusted by enterprises, but increasingly valuable to dev teams managing infrastructure, APIs, or customer data at scale.

• Deal: up to 70% OFF
• Period: November 28 — December 1
• Website: CrowdStrike

19. Liquid Web

Liquid Web offers premium managed hosting solutions tailored for developers, agencies, and businesses running mission-critical applications. With powerful VPS, dedicated, and cloud hosting options, it’s ideal for projects that demand reliability, scalability, and performance under load.

• Deal: up to 52% OFF
• Period: Now — December 5
• Website: Liquid Web

20. CloudClusters

HostPapa provides high-performance web hosting services tailored for small businesses, startups, and personal projects. With features like free domain registration, unlimited bandwidth, and a user-friendly control panel, it’s an excellent choice for developers seeking affordable yet powerful hosting solutions.

• Deal: Up to 64% OFF
• Period: Now — December 1
• Website: CloudClusters

🤖 AI Tools

21. Dorik

Dorik combines AI with no-code simplicity to help anyone build clean, responsive websites in minutes. With modern templates and drag-and-drop design, it’s a great tool for developers who want to ship MVPs, landing pages, or client projects faster — without starting from scratch.

• Deal: 50% OFF annual plans (Code: BFCM25)
• Period: November 14 — December 3
• Website: Dorik

22. Mailmodo

Mailmodo reinvents email marketing by helping you create interactive, AI-driven emails that boost engagement and ROI. Automate campaigns, personalize at scale, and integrate seamlessly with your stack, without the clunky workflows of legacy tools.

• Deal: 30% OFF (Code: MMBF30)
• Period: November 24 — December 6
• Website: Mailmodo

23. DocuWriter

DocuWriter uses AI to automatically generate API documentation, unit tests, and refactored code from your existing codebase. Perfect for busy devs maintaining large projects, onboarding new contributors, or improving code quality without doing it all manually.

• Deal: 40% OFF first purchase (Code: ORXLVNZV)
• Period: Now — December 1
• Website: DocuWriter

24. Meku

Meku helps developers go from prompt to deployed full-stack app in minutes. It generates the code for your frontend, backend, and integrations, so you can move from idea to MVP without boilerplate. Great for prototyping, hackathons, or launching fast.

• Deal: 30% OFF + Free FormBold Starter (Code: BLFCM2025)
• Period: November 18 — December 2
• Website: Meku

25. AIStarterkit

Want to build your own AI-powered SaaS or chatbot tool? AIStarterkit gives you a ready-to-use template with Next.js, OpenAI integration, authentication, and UI components, saving you hours of setup time.

• Deal: 30% OFF or Free with SaaSBold (Code: BLFCM2025)
• Period: November 18 — December 22
• Website: AIStarterkit

🎓 Courses

26. Vue School

Get access to premium Vue.js courses with Vue School, covering everything from Nuxt to TypeScript. Whether you’re a beginner or an advanced developer, these courses are designed to level up your skills.

• Deal: Up to 60% OFF
• Period: Live now
• Website: Vue School

27. AIDD — AI-Driven Development Masterclass

AI-Driven Development (AIDD) Masterclass was built to teach you techniques you can actually use day to day, such as tests that follow your coding style, agents that help with reviews and small fixes, and RAG setups that read your actual repos instead of guessing. The material is straightforward and focused on real AI workflows you can copy into your own projects.

• Deal: 45% OFF all plans
• Period: Limited-time Black Friday offer
• Website: AIDD.io

28. Vue Mastery

Vue Mastery provides high-quality Vue.js courses taught by industry experts, including Evan You, the creator of Vue.js. Whether you’re a beginner or an experienced developer, their courses are designed to enhance your Vue.js knowledge and skills.

• Deal: Up to 60% OFF
• Period: Live now
• Website: Vue Mastery

29. LabEx

LabEx offers interactive, browser-based labs that teach you Linux, DevOps, and Cybersecurity through real-world scenarios. Instead of just watching videos, you’ll get hands-on experience configuring systems, running commands, and solving challenges.

• Deal: 50% off 2-years (Code: 2025BF50) / 30% OFF 1-year (Code: 2025BF30)
• Period: November 12 — December 1
• Website: LabEx

30. Certificates.dev

Earn a recognised frontend certification at certficates.dev. Vue.js and Nuxt offer the only official certifications endorsed by Evan You and Sébastien Chopin. React, Angular, and JavaScript certifications are built with review from Microsoft MVPs, Google Developer Experts, and top industry experts.

• Deal: 60% OFF all certifications
• Period: Limited-time Black Friday offer
• Website: certificates.dev

📚 E-Books

31. React — The Road To Enterprise (JavaScript Edition)

This advanced guide takes you beyond the basics of React and into the world of enterprise-scale app architecture. Learn modern design patterns, best practices, and how to organize your code for maintainability, scalability, and team collaboration.

• Deal: 50% OFF (Code: BLACKFRIDAY)
• Period: Live now
• Website: React — The Road to Enterprise (JavaScript Edition)

32. The CloudSec Engineer

Written by Marco Lancini, this book walks you through how to break into and grow within the Cloud Security industry as an individual contributor, not just a manager. It’s packed with practical advice on building your profile, mastering the right skills, and navigating the industry from the inside.

• Deal: 40% OFF (Code: CYBERNOVEMBER25)
• Period: Live now
• Website: The CloudSec Engineer

33. The Missing Book To Understand Indexes

If your SQL queries are slow, chances are your indexing needs work. This book breaks down indexing concepts into practical, easy-to-follow steps that help you write faster queries and design better data access patterns.

• Deal: 50% OFF
• Period: Live now
• Website: The Missing Book To Understand Indexes

34. Vue — The Road to Enterprise

For Vue developers ready to go beyond simple apps, Vue — The Road to Enterprise offers a deep dive into enterprise-level patterns, scalable architecture, and best practices for building maintainable Vue applications. Learn how to structure your projects, manage complexity, and apply real-world techniques used by large dev teams.

• Deal: 50% OFF (Code: BLACKFRIDAY)
• Period: Now — December 2
• Website: Vue — The Road to Enterprise

35. BeyondCode

BeyondCode is a comprehensive guide to becoming a more productive and effective programmer. It includes lessons, tips, and best practices to help developers master their craft, making it a valuable resource for developers at all levels.

• Deal: 50% OFF (Code: BLACKFRIDAY25)
• Period: Live now
• Website: BeyondCode

🎉 Conclusion

Black Friday and Cyber Monday 2025 bring an incredible chance for developers to save big on tools, libraries, and resources that can supercharge your projects and career. Whether you’re adding powerful PDF support with React PDF, enhancing site performance with NitroPack, hosting apps reliably through Cloudways, exploring AI-assisted workflows with DocuWriter, or building your skills with Vue School, there’s something valuable for every developer, from solo builders to enterprise teams.

Most deals are only available for a limited time, so don’t wait too long to take advantage of them. If you’re looking for even more Black Friday and Cyber Monday deals, check out our curated list on GitHub for JavaScript developers.

Have a deal you’d like to share? Drop it in the comments below, I’d love to hear about it!

Happy coding, and happy shopping! 🚀

If you’re building with React, you know working with PDF files isn’t just a backend job anymore. Users expect smooth in-browser experiences, whether they’re viewing, exporting, or marking up a document. Secure document handling, invoices, and custom reports are just a few areas where robust PDF support on the client side matters.

Open-source libraries make it much easier for React developers to add PDF generation and editing right into their apps. This post spotlights six open-source libraries, proven to work well with React projects, ensuring your next build is developer-friendly and dynamic.

A quick introduction about us. React PDF Kit lets you display PDF files directly inside your React.js or Next.js projects. With more than 20 built-in features like a default toolbar, easy customization and responsive layouts, your users can view and work with PDFs without leaving your app.

You can add a React PDF Viewer component to all kinds of projects. Use it in document systems, workflow tools, AI apps or as a simple PDF reader. It’s flexible and fits right in wherever you need to show or manage PDF files.

Why Handling PDFs in React Matters

If you’re building apps with React, you’re probably used to connecting to all kinds of APIs and running server-side code for heavy tasks. PDF generation, though, isn’t just a back-end. Many projects today call for creating, viewing, and modifying PDFs right inside the browser. Why is this important? Here are a few reasons:

1. Better user experience — Create personalize documents, invoices, or transaction receipts dynamically for the user without sending data to a server.
2. Dynamic Document Creation — Let users compose custom documents such as letters, resumes, or proposals and export them as professional PDFs.
3. Privacy and Secure — Sensitive information never leaves the device: generate payslips, contracts, or medical records.

Handpicked Open-Source Libraries for PDF Generation

If you’re building a React app that needs invoices, receipts, forms, or dynamically filled reports, the right open-source library can save you hours and keep everything in the browser.

1. react-pdf/renderer: PDF Creation, Powered by React Components

@react-pdf/renderer takes a React-first approach, letting you build PDFs in the browser or server using plain React components. Styles and layouts are handled with a familiar syntax that feels just like working with JSX and CSS. The API focuses on developer comfort, making it easy to build, tweak, and maintain dynamic templates from your app's data.

Key advantages:

• React-centric syntax for designing PDF layouts
• Support dynamic content and styling, just like regular React components
• Generate multipage documents with previews-great for invoices or complex reports
• Write layouts with flexbox, margins, and custom fonts
• Render images, vector graphics, and dynamic tables

It works best when you want clear structure and full control over layout, especially for branded or data-driven documents. As of July 2025, @react-pdf/renderer has over 15,900 stars with over 150 contributors on GitHub and an average weekly downloads count of over 860,000.

GitHub - diegomura/react-pdf: 📄 Create PDF files using React

📄 Create PDF files using React. Contribute to diegomura/react-pdf development by creating an account on GitHub.

2. react-to-print: Turn React Components Into Printable PDFs

If your main goal is to print exactly what a user sees, from tables to styled forms, react-to-print makes it simple to send just about any React component straight to the print dialog or PDF. You wrap your component, trigger a print action, and users can choose to save or print with the browser's native printing tools.

Key advantages:

• No need to rewrite layouts or data. Just print what’s already rendered.
• Ideal for receipts, summaries, or export features that mirror your UI.
• Minimal setup, focused on getting users from screen to paper (or PDF) fast.

It’s especially handy for dashboard exports or giving admins a one-click PDF download. As of July 2025, react-to-print has over 2,300 stars with 40 contributors on GitHub and an average weekly downloads count of over 750,000.

GitHub - MatthewHerbst/react-to-print: Print React components in the browser

Print React components in the browser. Contribute to MatthewHerbst/react-to-print development by creating an account on…

3. pdfme: Form-First PDF Generation with Templates

pdfme focuses on generating PDFs from form data and templates. It features a WYSIWYG template editor, making it easy to create and modify interactive forms. It's written in TypeScript with a React-first API.

Key advantages:

• Visual template designer for live preview and iteration
• Focus on dynamic, user-driven PDF editing and form filling.
• Design for workflows that rely on form completion such as waivers, registration forms, or certificates

For apps heavy on PDF forms or user-driven templates, pdfme offers a modern workflow that fits well with React. It's useful for onboarding, contracts, HR forms, or any workflow needing editable PDFs. As of July 2025, pdfme has over 3,400 stars with 46 contributors on GitHub and an average weekly downloads count of over 33,000.

GitHub - pdfme/pdfme: Open-source PDF generation library built with TypeScript and React. Features…

Open-source PDF generation library built with TypeScript and React. Features a WYSIWYG template designer, PDF viewer…

4. jsPDF: Lightweight PDF Creation in the Browser

jsPDF is one of the oldest annd long-standing favorite for generating PDFs client-side, thanks to its speed and flexibility. While it's not React-specific, it lets you export HTML or JavaScript-generated content right into PDF files, without a server roundtrip.

Key advantages:

• Create PDFs directly from data or user input in real-time.
• Exporte HTML, charts, and tables as downloadable PDFs.
• Active open-source community and tons of online examples.

If you need to convert simple React outputs (like lists or tables) into downloadable files, or for use cases like invoices, tickets, or text-based documents, jsPDF is a great place to start. As of July 2025, jsPDF has over 30,400 stars with 190 contributors on GitHub and an average weekly downloads count of over 2,600,000.

GitHub - parallax/jsPDF: Client-side JavaScript PDF generation for everyone.

Client-side JavaScript PDF generation for everyone. - parallax/jsPDF

5. pdfmake: Declarative and JSON-Driven PDF Generation

pdfmake stands out with its declarative, JSON-first structure. You define what goes into your PDF-sections, tables, and style info-using JSON objects. The engine turns this data into professional PDF documents.

Key advantages:

• Declarative layout with JSON or JavaScript objects for reproducibility
• Full support for tables, nested data, and advanced styling
• Handles big data and complex page layouts well.
• Support advanced features like headers, footers, and tables out of the box

Although the learning curve is a bit different, if you’re looking for for automated reports, multi-page exports, and systems with complex, variable layouts, it’s well worth it. As of July 2025, pdfmake has over 12,000 stars with 90 contributors on GitHub and an average weekly downloads count of over 940,000.

GitHub - bpampuch/pdfmake: Client/server side PDF printing in pure JavaScript

Client/server side PDF printing in pure JavaScript - bpampuch/pdfmake

Open-Source Standout for PDF Modification: pdf-lib

Nowadays, users want the ability to update, fill, and even combine PDFs right from their web app right in the frontend. Choosing the right PDF modification library can mean the difference between a clunky workaround and a smooth, direct document experience for your users.

6. pdf-lib: Strong Merging and Editing

When you need serious power to modify or merge PDFs on the frontend, there isn’t a lot of open-source option. pdf-lib is probably the only tool around. It's not just a PDF creator, you can also change existing docs, add forms, combine files, or work with digital signatures, all from the browser or using Node.js.

Key advantages:

• Edit existing documents, update text, insert images, or manipulate graphics directly inside a PDF
• Combine several PDFs into one or break big files into smaller pieces.
• Let users add highlights, notes, or graphic marks on a PDF
• Has no external dependencies, keeping your bundle size manageable and integrations simple
• TypeScript-based which helps avoid runtime surprises and keeps complex projects easy to maintain

For React developers, pdf-lib helps you build better user experiences and deliver real customization without leaving your browser. As of July 2025, pdf-lib has over 7,700 stars with 42 contributors on GitHub and an average weekly downloads count of over 1,480,000.

GitHub - Hopding/pdf-lib: Create and modify PDF documents in any JavaScript environment

Create and modify PDF documents in any JavaScript environment - Hopding/pdf-lib

⚠️ The library has not been updated since Nov 2021 so use it with caution. There is a forked version but I’m unable to verify its current status.

Choosing the Right PDF Generation Library

With many options out there, picking one can feel like picking a framework all over again. Some libraries do everything, while others focus on one workflow. Making the right call early means less tech debt and fewer regrets down the road. Here’s a simple checklist to help narrow things down:

1. React Compatibility — Libraries made for React-like React PDF-take advantage of hooks, props, and state for smooth integration. Generic JS tools may need more setup or “glue code.”
2. Ease of Integration — Clean, clear docs and sortable code examples save time. Friendly onboarding makes a big difference (no one wants to spend days debugging basic installs).
3. Features You Really Need — Fancy editing, annotations, or in-app signing sound nice, but not every project needs these. List your core must-haves before picking.
4. Performance — Some tools run all tasks in the browser, so try generating PDF based on your use cases. User experience tanks if PDF rendering lags or blocks the interface.
5. Community — Open-source tools with strong communities help you troubleshoot and avoid dead ends. Always check how active the repo is.

Real-World Testing

Before finalizing your choice, wire up a quick prototype. Try generating and editing a sample PDF with your own data. Bugs or quirks often show up in real workflows first, not just code samples. A little time spent testing now can save you endless fixes down the road.

Conclusion

Choosing the right library isn’t just about naming features, but features you really need. Take the time to try these top libraries with your own workflow and project needs. A library suitable for a dynamic report might not work well with a form-heavy app.

If you’ve been relying only on the backend for PDFs, now is the moment to bring that power to your frontend. Test a few options, see what clicks, and start building workflows users will actually enjoy. Feel free to drop your own lessons learned or library picks in the comments!

If you liked this article, take a look at React PDF Kit. It’s a React PDF viewer made for React and Next.js projects. No matter if you’re new to building apps or handling a larger setup, React PDF is ready to help.

React PDF is built with developers in mind and offers:

• Out-of-the-box features — See the Getting Started guide to get moving fast
• Plenty of ways to customize — Check out options to style and tweak its components to fit your needs
• Simple, clear APIs — Dive into the API documentation to see all the details

Your support helps me keep building new tools and writing for React devs. Thanks for giving React PDF Kit a look! 🙏

When working on React projects, one thing I’ve learned is that having the right tools can make or break the user experience. And when it comes to displaying documents, PDFs are still one of the best ways to share content, whether it’s reports, manuals, or e-books. The challenge, though, is how to integrate a reliable PDF viewer into your app without jumping through hoops.

In this article, I’ll walk you through four different ways to build a PDF viewer in React.js. From quick and simple methods like iFrame and opening PDFs in a new tab, to more customizable options like PDF.js and react-pdf—you’ll be able to choose the approach that works best for your project.

Why PDFs Matter in Web Development

Rendering PDFs on websites comes with a wide range of use cases. Here are some scenarios where PDFs can really come in handy:

1. Financial Reports Imagine you’re building a finance dashboard, and your users need to access quarterly reports or balance sheets. By embedding these documents as PDFs, users can easily download, print, or view them in high resolution on any device. Plus, you keep the formatting consistent and professional, making sure nothing looks out of place.
2. Sales Invoices For apps that generate or display invoices, PDFs are the perfect format to ensure clarity and accuracy. You can provide users with downloadable, printable invoices that maintain the exact layout and branding you’ve designed. No more worrying about documents being altered or misinterpreted.
3. Research Papers If you’re working on a platform that handles academic content or research, PDFs are a great way to present papers, journal articles, and white papers. Researchers can zoom in for detail, highlight key points, or leave annotations—all while preserving the document’s original format.
4. Legal Contracts For businesses dealing with contracts, confidentiality agreements, or any legal documents, PDFs are essential for maintaining integrity and security. PDFs ensure that legal contracts remain tamper-proof, preserving the original formatting and allowing for secure digital signatures. This is crucial when handling sensitive agreements, ensuring they can be easily shared, viewed, and stored by all parties involved without the risk of edits.

React PDF Kit: A Flexible and Powerful PDF Viewer for React.js

Before diving into the technical side of things, let me introduce you to React PDF Kit, a library I’ve been working on that brings PDF viewing directly into your React or Next.js applications. With over 20 features including theme customization, external APIs, and responsive layouts, it’s perfect for ensuring your users can interact with PDFs without leaving your site.

If you’re interested in trying it out, I’d be super grateful if you could check out React PDF. Your support will motivate me to keep creating more content! ❤️‍🔥

Method 1: Open PDF in a New Tab

If you're working in React and need a simple way to open PDFs, Method 1 is your go-to solution: opening the PDF in a new browser tab. Let's break it down:

1. Add a Link or Button

In your React component, create a link or button to open the PDF.

<a href="/your-pdf.pdf" id="pdfLink" target="_blank">Open PDF</a>
<!-- or button -->
<button id="pdf-button">Open PDF</button>

2. Trigger the PDF

Add an onclick event to open the PDF in a new tab.

const pdfUrl = '/your-pdf-url-goes-here.pdf';

document.getElementById('pdf-button').onclick = function() {
    window.open(pdfUrl, '_blank');
};

Pros and Cons

Pros:

• Easy to Implement: This method is quick and simple.
• Direct Access: Users can view the PDF without anything in between.

Cons:

• Limited Control: You can't fully control how the PDF is displayed.
• Browser Differences: The way it behaves can vary between browsers.

When to Use It

Use this method when you want to keep the PDF viewer separate from your main website. For instance, if embedding it in an iframe isn't ideal.

Method 2: Using an iFrame, Embed, or Object

A simple way to display PDFs in React is by using an <iframe>, <embed>, or <object> element. These methods leverage the browser’s built-in PDF capabilities, allowing you to embed the PDF directly into your app.

How to Implement:

1. Create your React project.
2. Add one of these elements (<iframe>, <embed>, or <object>) in your JSX.
3. Set the src attribute to the PDF file’s URL.

<iframe> Example:

<iframe src="/your-pdf-url.pdf" width="100%" height="600px"></iframe>

<embed> Example:

<embed src="/your-pdf-url.pdf" width="100%" height="600px" type="application/pdf" />

<object> Example:

<object data="/your-pdf-url.pdf" width="100%" height="600px" type="application/pdf">
  <p>Your browser doesn’t support PDFs. Please download the PDF to view it: <a href="/your-pdf-url.pdf">Download PDF</a>.</p>
</object>

You can see a React code in my Github repository

Pros:

• Super Easy: It’s quick and simple to implement.
• Uses Browser’s PDF Viewer: No extra libraries required—just use the browser’s native PDF viewer.
• No Setup Needed: Works right away without additional configuration.

Cons:

• Limited Control: You can’t control the PDF viewer’s interface or customize it.
• Browser Compatibility: Not all browsers handle these methods the same way.
• Customization Limits: These options don't offer much flexibility for customizing the viewing experience.

When to Use It:

Use these methods when you want a fast, straightforward solution and don’t need to customize the PDF viewer.

Method 3: Using PDF.js

If you need more control over how PDFs are displayed and interacted with, PDF.js is a great option. Created by Mozilla, PDF.js lets you fully customize the PDF viewing experience within your app.

How to Implement:

• Install the PDF.js library in React project.

npm install pdfjs-dist

• Create a React component to render the PDF using PDF.js.

import { PdfProps } from "../types";
import * as PDFJS from "pdfjs-dist";
import type {
  PDFDocumentProxy,
  RenderParameters,
} from "pdfjs-dist/types/src/display/api";
import { useCallback, useRef, useState, useEffect } from "react";

export default function PdfJs(props: PdfProps) {
  PDFJS.GlobalWorkerOptions.workerSrc =
    "https://unpkg.com/pdfjs-dist@4.7.76/build/pdf.worker.min.mjs";

  const { src } = props;
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const [pdfDoc, setPdfDoc] = useState<PDFDocumentProxy>();
  const [currentPage, setCurrentPage] = useState(1);
  let renderTask: PDFJS.RenderTask;

  const renderPage = useCallback(
    (pageNum: number, pdf = pdfDoc) => {
      const canvas = canvasRef.current;
      if (!canvas || !pdf) return;
      canvas.height = 0;
      canvas.width = 0;
      // canvas.hidden = true;
      pdf
        .getPage(pageNum)
        .then((page) => {
          const viewport = page.getViewport({ scale: 1.5 });
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          const renderContext: RenderParameters = {
            canvasContext: canvas.getContext("2d")!,
            viewport: viewport,
          };
          try {
            if (renderTask) {
              renderTask.cancel();
            }
            renderTask = page.render(renderContext);
            return renderTask.promise;
          } catch (error) {}
        })
        .catch((error) => console.log(error));
    },
    [pdfDoc]
  );

  useEffect(() => {
    renderPage(currentPage, pdfDoc);
  }, [pdfDoc, currentPage, renderPage]);

  useEffect(() => {
    const loadingTask = PDFJS.getDocument(src);
    loadingTask.promise.then(
      (loadedDoc) => {
        setPdfDoc(loadedDoc);
      },
      (error) => {
        console.error(error);
      }
    );
  }, [src]);

  const nextPage = () =>
    pdfDoc && currentPage < pdfDoc.numPages && setCurrentPage(currentPage + 1);

  const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);

  return (
    <div>
      <button onClick={prevPage} disabled={currentPage <= 1}>
        Previous
      </button>
      <button
        onClick={nextPage}
        disabled={currentPage >= (pdfDoc?.numPages ?? -1)}
      >
        Next
      </button>
      <canvas ref={canvasRef}></canvas>
    </div>
  );
}

You can find a complete example code on my Github: components/PdfJs.tsx.

Here is the result 👇

Pros:

• Advanced Features: PDF.js provides powerful PDF rendering with options like zoom, page navigation, and more.
• Highly Customizable: You have full control over how the PDF is displayed and interacted with.
• Cross-Browser Support: Works across most modern browsers.
• Well-Maintained: Backed by a big community with regular updates.

Cons:

• Learning Curve: It takes time to learn and implement.
• More Complex: Setting it up is harder compared to using iFrame or opening PDFs in a new tab.
• Documentation Challenges: The docs can be tough to follow.
• Integration Issues: Customizing it for frameworks like React, Angular, or Vue can be tricky.
• Higher Complexity: Handling advanced interactions with PDFs increases the complexity.

When to Use It:

Use PDF.js when you need full control over the PDF viewer and want to add advanced features directly into your app’s interface.

Method 4: Using react-pdf (MIT)

react-pdf is an open-source package built on top of PDF.js that makes it easier to display PDFs in React apps while simplifying the development process.

How to Implement:

• Install react-pdf using npm or yarn.

npm install react-pdf

• Import the react-pdf component into your app.

import { pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

• Follow the instructions on GitHub for detailed setup.
• Create a React component to render PDF

export default function PdfReactPdf({ src }: PdfProps) {
  const [numPages, setNumPages] = useState<number>();
  const [pageNumber, setPageNumber] = useState<number>(1);

  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
    setNumPages(numPages);
  }

  function nextPage() {
    setPageNumber((v) => ++v);
  }

  function prevPage() {
    setPageNumber((v) => --v);
  }

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <button onClick={prevPage} disabled={pageNumber <= 1}>
        Previous
      </button>
      <button onClick={nextPage} disabled={pageNumber >= (numPages ?? -1)}>
        Next
      </button>
      <Document
        file={src}
        onLoadSuccess={onDocumentLoadSuccess}
        className="my-react-pdf"
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}

You can check out my example on my Github: components/PdfReactPdf.tsx.

Pros:

• Easy Integration: Works smoothly with React. Better developer documentation compared to PDF.js.
• More Control: Offers more customization than iFrame or New Tab methods.
• Responsive and Customizable: Adjusts well to different screen sizes and offers some customization.

Cons:

• More Setup: Takes a bit more effort to set up compared to simpler methods.
• Limited Advanced Features: Doesn’t offer as much flexibility as using the full PDF.js library.

When to Use It:

Use react-pdf if you need an easy-to-implement, customizable PDF viewer for your React project.

Conclusion

There are several ways to implement a PDF viewer in React.js. Using iFrame or opening the PDF in a new tab offers simplicity but limits customization. PDF.js provides advanced features and control, but it comes with added complexity. react-pdf (open-source) bridges the gap by offering ease of use with customization options.

Choose the method that best fits your project’s needs, whether it’s speed, simplicity, or control over the user experience.

Is there a Better Solution?

While methods like iFrame or opening PDFs in a new tab can be quick fixes, they don’t offer much control or customization. PDF.js and react-pdf (an open-source library for React) provide more advanced options, but they come with their own challenges—especially if you’re looking for something easier to implement, maintain, and customize for your specific React project.

That’s why I built React PDF Kit (not to be confused with react-pdf). While react-pdf is a great open-source library, the React PDF Viewer component is designed to offer more flexibility, powerful customization options, and a simpler setup process tailored to developers working on both small and complex React applications.

1. Made for React.js: Unlike more general libraries, React PDF is built from the ground up to work seamlessly with React. Whether you need quick rendering or advanced features, it integrates easily into your project with just a few lines of code.
2. Customization without Complexity: With React PDF, you have full control over the appearance and behavior of your PDF viewer. You can match the viewer’s design to your app’s theme, add interactive features like search and bookmarking, and customize the layout—all without the hassle of dealing with complex configurations.
3. Extensive Feature Set: Whether you need basic functionality like viewing PDFs or more advanced features like rotation, different scrolling modes, and responsive design, React PDF has you covered. Plus, it’s built with performance in mind, so you don’t have to worry about lag when handling large files.
4. User-Friendly Documentation: I’ve made sure the technical docs are clear and easy to follow. From starter kits to detailed API references, everything is in place to help you get up and running fast.
5. Reliable Support and Updates: As developers, I know how important it is to have reliable support. That’s why React PDF comes with responsive customer support and regular updates to keep the library optimized and bug-free.

If this sounds like what you need, I’d be grateful if you could check out React PDF. Your support encourages me to keep improving and building tools for the community. Thank you! 🙏

Since my last post on Best 4 Methods to Build a PDF Viewer in React.js: PDF.js, react-pdf, and More, my team and I launched React PDF in March 2025, a library that help React developers easily add a React PDF viewer to their Next.js apps.

In this article, I'll show you how to display the default PDF Viewer in Next.js in just a few steps. I'll also share a few use cases to help you make the most out of React PDF in your own projects.

Why React PDF Kit?

If you’re building a PDF viewer in a Next.js app, you need a component that just works. React PDF Kit stands out for its balance of powerful features and simple setup. You can drop it into your Next.js project with little work and handles most of what React devs expect. Its API feels natural if you know React, so no relearning is required.

React PDF offers everything most apps need right out of the box. Here’s what you get:

1. React-First: Designed specifically for React.js developers, React PDF uses familiar component-based patterns, and hooks fit right in with your Next.js app’s structure.
2. Customizable: You can style or customize easily. From changing icons and colors to match your branding or customize your toolbar layout with React Context APIs to fit your app's needs.
3. Responsive Design: Fits devices big or small, so mobile users can scroll, zoom, and interact with ease.
4. High Performance: Optimized for handling large PDFs without sacrificing speed or performance.
5. No surprises: The documentation is clear, and support is strong. Bugs get addressed fast. Most developers will find everything they need quickly.

Step 1: Set up a Next.js Project

In this tutorial, I'll use StackBlitz to demonstrate how to build a React PDF Viewer in a Next.js project. Here's how to get started.

1.1 Visit StackBlitz & Create a New Project

Go to https://stackblitz.com. Assuming you already have an account and are logged in, click “New Project” in the top-right corner. You’ll see a list of available frameworks—select Next.js.

1.2 Wait for StackBlitz to Set Things Up

StackBlitz will automatically install the necessary dependencies and launch your Next.js project in the browser.

That’s it! You're now ready to integrate React PDF Viewer into your StackBlitz-based Next.js project.

Step 2: Integrate React PDF Kit into a Next.js Project

2.1 Install React PDF

First, install the @pdf-viewer/react package in your project. In the StackBlitz terminal, press Ctrl + C to stop the current process, then run the following command:

npm install @pdf-viewer/react

Wait for the installation to complete. This should only take a few seconds.

If you're installing this library in your own Next.js project, check out the installation guide for more details.

2.2 Set Up the Viewer

After installing, follow these steps to set up the PDF viewer:

💡 Pro Tip: Always use client-side rendering for these components using dynamic imports to prevent hydration mismatches and SSR-related issues with PDF rendering.

Add RPConfig at the Root Level

The RPConfig component provides the global configuration for React PDF and should wrap your entire app.

Place the RPConfig component at the root of your application (e.g., in _app.tsx or a root layout component). Make sure it only runs on the client side.

components/AppProviders.tsx

'use client';
import { RPConfig, RPConfigProps } from '@pdf-viewer/react';
import { type PropsWithChildren } from 'react';

function AppProviders({
  children,
  ...props
}: PropsWithChildren<RPConfigProps>) {
  return <RPConfig {...props}>{children}</RPConfig>;
}
export default AppProviders;

components/LazyAppProviders.tsx

'use client';
import dynamic from 'next/dynamic';

const LazyAppProviders = dynamic(() => import('./AppProviders'), {
  ssr: false,
});
export default LazyAppProviders;

app/layout.tsx

import { type PropsWithChildren } from 'react'
import LazyAppProviders from './components/LazyAppProviders'

export default function RootLayout({ children }: PropsWithChildren) {
 return (
   <html lang="en">
     <body>
      <LazyAppProviders licenseKey="your-license-key">
        <main>
          { children }
        </main>
      </LazyAppProviders>
    </body>
   </html>
 )
}

Step 3: Create a Reusable PDF Viewer Component

To keep your code clean and reusable, it’s a good practice to wrap the viewer in its own component. This also makes it easier to customize or extend the viewer later as your app grows.

Build the AppPdfViewer component

components/AppPdfViewer.tsx

'use client'
import { RPProvider, RPDefaultLayout, RPPages } from '@pdf-viewer/react'

interface OwnProps {
 src: string
}

const AppPdfViewer = (props: OwnProps) => {
 const { src } = props
   return (
     <RPProvider src={ src }>
       <RPDefaultLayout>
         <RPPages />
       </RPDefaultLayout>
     </RPProvider>
   )
}

export default AppPdfViewer

Create a Lazy-Loaded Wrapper Component

Since React PDF is client-side only, we’ll also create a lazy wrapper to prevent SSR issues and hydration errors in Next.js.

components/LazyAppPdfViewer.tsx

'use client'
import dynamic from 'next/dynamic'

const LazyAppPdfViewer = dynamic(() => import('./AppPdfViewer'), {
 ssr: false
})
export default LazyAppPdfViewer

Use the PDF Viewer in Your App

You can now use LazyAppPdfViewer anywhere in your Next.js application.

Here's an example of how to use it on the index page:

app/index.tsx

import LazyAppPdfViewer from '../components/LazyAppPdfViewer';

export default function Home() {
  const pdfUrl = "https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf"
  return (
   ...
   <div className="pdf-viewer mb-3 w-[500px] lg:w-[992px]">
    <LazyAppPdfViewer src={ pdfUrl } />
   </div>
   ...
  )
}

That’s it! You should now see your PDF in action.

Note: At the moment, Hot Module Reload (HMR) does not apply css style automatically to a component that dynamically import with ssr: false. It is recommended to refresh the page after changing the component.

Looking for a Faster Setup?

If you want to skip boilerplate and get straight to building, check out the React PDF Starter Toolkit.

It includes ready-to-use templates for:

• React (Vite / Webpack)
• Next.js (JavaScript / TypeScript)

Each template comes with a clean folder structure and sample code so you can build a PDF viewer quickly without spending hours configuring dependencies. Just clone, customize, and go. 🚀

Common Use Cases

Customize the PDF Viewer to Match Your Branding

Every project has its own look and feel. @pdf-viewer/react makes it easy to tailor the PDF viewer’s appearance so it fits right into your app — whether it’s light mode, dark mode, or a custom color palette.

With the customVariables prop in the RPTheme component, you can quickly apply brand colors to the viewer without digging into complex CSS overrides.

Here’s a simple example of applying a custom background color:

...
const AppPdfViewer = (props: OwnProps) => {
 const { src } = props
   return (
     <RPProvider src={ src }>
       <RPTheme
          customVariables={{ '--rp-toolbar-background': '#F7E3D5' }}
          customDarkVariables={{ '--rp-toolbar-background': '#874707' }}
        >
         <RPDefaultLayout>
           <RPPages />
         </RPDefaultLayout>
       </RPTheme>
     </RPProvider>
   )
}

export default AppPdfViewer

Light Mode

Dark Mode

Why this is useful:

• Provides a consistent branded experience
• Works out of the box with theme switching (light/dark mode)
• Saves time styling PDF viewers for modern UIs

Curious about more CSS variables you can override? Check out Overriding Style for details.

Customize Any Toolbar Icon

The @pdf-viewer/react component offers flexibility in customizing the user interface. You can easily replace any default icons with your own, allowing you to maintain brand consistency or match with the rest of your application’s UI.

Here’s an example of how to replace the default toolbar icons in @pdf-viewer/react with Lucide Icons, allowing for a more customized and consistent user interface.

To get started, install the Lucide Icons package:

npm install lucide-react

Once installed, you can import and use Lucide icons to replace the default icons in @pdf-viewer/react.

...
const AppPdfViewer = (props: OwnProps) => {
  const { src } = props;
  const defaultIconDimension = { width: 20, height: 20 };
  return (
   ...
    <RPDefaultLayout
      icons={{
        zoomInIcon: <ZoomInIcon {...defaultIconDimension} />,
        zoomOutIcon: <ZoomOutIcon {...defaultIconDimension} />,
        downloadIcon: <DownloadIcon {...defaultIconDimension} />,
        searchIcon: <SearchIcon {...defaultIconDimension} />,
        ...
      }}
    >
      <RPPages />
    </RPDefaultLayout>
   ...
  )
}
...

At this point, all of the viewer's toolbar icons have been successfully replaced.

If you'd like to see the example code in action, check out my StackBlitz for this article.

Conclusion

Adding a PDF viewer to your Next.js app is simple with React PDF viewer. The setup takes just a few steps, and you instantly get a flexible, fast and robust tool. The viewer works responsively across different devices and screen sizes. You can easily style it to match your app’s look or let users zoom in and jump to pages without any hassle.

React PDF is a great choice for:

• Simple PDF reading experiences
• Document workflows and approval systems
• AI-powered tools that need to display PDFs
• Business and productivity apps with embedded documents

It takes care of PDF rendering behind the scenes, so you can focus on building great features your users want.

Try it out and see how easy it is to upgrade your project’s PDF viewing experience! 🚀

👉 Want to explore more? Check out the full React PDF Kit documentation to see what else you can build.

If you found this helpful, let me know! And if you build something cool with React PDF, I’d love to hear about it.

In web development, forms play a pivotal role. They serve as the interface for users to interact with your app or website. I have created a lot of React forms (way too many 🤣) with or without a UI library. Personally, for anything new, you should try to code or do a proof of concept without supporting libraries to understand how things work at the fundamental level. Initially, it may take a bit longer, but you will understand how things work better. Then, you can adapt to future requirements or challenges that may come your way.

In this article, I will share the key concepts with examples on how to create a proper React form. To create a form, you will need to consider the following points

1. What is a form?
2. Controlled vs Uncontrolled Inputs
3. Building and Managing Form Input Fields
4. Handling Form Submissions

📄 Heads-Up: Smooth PDF Viewing in React

Before we dive into the top UI libraries, here’s something worth bookmarking: If you’re building a React app that needs to display PDF documents reliably, React PDF Kit might save you a lot of time.

It uses pure React components to render PDFs. No iframes, no third-party viewer wrappers, just fast, smooth rendering inside your UI. Whether you’re building a dashboard, internal tooling, or a document-heavy app, it’s designed to slot right into your workflow.

👉 Try out React PDF now and see how easy it is to bring professional-grade PDF viewing to your React app.

What is a form?

Imagine you're filling out a physical form at a doctor's office. It contains fields like your name, address, and reason for the visit. A form is like a digital version of that physical form, but on a website or an app. It allows users to interact with a website by letting you input information, like your email or a message, and then submit it. The submitted information can be used to perform various actions.

For example, think of a contact form on a website. You can enter your name, email, and a message, and when you click "Submit," the website receives your information. This allows the website owner to respond to your message and get in touch with you.

Forms can be used for many different purposes, like signing up for a newsletter, leaving feedback, or placing an order online. The websites and apps use forms to interact with us and provide relevant services.

Uncontrolled vs Controlled Inputs

In React, form input fields can be divided into two categories: controlled and uncontrolled inputs. The main difference between them lies in how their values are managed and updated.

Uncontrolled Inputs

Uncontrolled inputs do not have direct data binding, and their current values are not managed by React. Instead, their values are only fetched or synced when needed, such as during the form submission or a specific event. This gives React less control over the input's value, and it relies on using ref or other methods to manually obtain the input value.

Example:

import { useCallback, useRef } from "react";

export const Uncontrolled = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleClick = useCallback(() => {
    console.log(`Password: ${inputRef.current?.value}`);
  }, []);
  return (
    <>
      <div>
        <label htmlFor="password">Password: </label>
        <input type="password" id="password" ref={inputRef} />
        <button onClick={handleClick}>Submit</button>
      </div>
    </>
  );
};

In the example above, the input field is uncontrolled as it does not bind value with React state. Instead, it relies on the ref attribute to create a reference to the input. When the user clicks the submit button, the handleClick method accesses the input's value using the ref that bind to input to log the password.

Controlled Inputs

Controlled inputs allow React to control their current values through binding with a value property and subscribe it value's change with onChange event or onInput event

As a user interacts with the form, React keeps track of the input's state and updates the data accordingly.

Example:

import { ChangeEvent, useCallback, useState } from "react";

export const Controlled = () => {
  const [password, setPassword] = useState<string>("");

  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setPassword(event.target.value);
  }, []);

  const handleSubmit = useCallback(() => {
    console.log("Password:", password);
  }, [password]);

  return (
    <>
      <div>
        <label htmlFor="password">Password: </label>
        <input
          type="password"
          onChange={handleChange}
          value={password}
          id="password"
        />
        <button onClick={handleSubmit}>Submit</button>
      </div>
    </>
  );
};

In the example above, the input field is controlled as its value is bound to the password value property. When the user types or updates the input, the password property value also updates accordingly.

Building and Managing Form Input Fields:

As you may know, there are many input types. In the interest of time, we will cover the more common ones.

Types of Input Fields

Input

This is one of the most common form elements. Let's create a text input field as an example.

import { ChangeEvent, useCallback, useState } from "react";

export const Input = () => {
  const [value, setValue] = useState<string>("");

  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  }, []);

  return (
    <>
      <div>
        <label htmlFor="name">Name: </label>
        <input type="text" id="name" value={value} onChange={handleChange} />
      </div>
      <div>value: {value}</div>
    </>
  );
};

Checkbox

Checkboxes allow users to select one or more options from a set.

import { useCallback, useState } from "react";

export const Checkbox = () => {
  const [value, setValue] = useState(false);

  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.checked);
  }, []);

  return (
    <>
      <div className="checkbox">
        <label htmlFor="checkbox"> Accept Terms: </label>
        <input
          type="checkbox"
          id="checkbox"
          checked={value}
          onChange={handleChange}
        />
      </div>
      <div>value: {JSON.stringify(value)}</div>
    </>
  );
};

In the above code, we bind the Accept Terms value to a checkbox input. When the checkbox is clicked, the Accept Terms value will automatically update to reflect the status of the checkbox.

Select

Like Checkboxes Select allow users to select option from a set but in other UI

import { ChangeEvent, useCallback, useState } from "react";

export const Select = () => {
  const [value, setValue] = useState<string>("");

  const handleSelect = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
    setValue(event.target.value);
  }, []);

  return (
    <>
      <div>
        <label htmlFor="select">Select: </label>
        <select id="select" value={value} onChange={handleSelect}>
          <option disabled value="">
            Please choose one
          </option>
          <option value="volvo"> Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </div>
      <div>selected: {value}</div>
    </>
  );
};

In the above code, we bind value of select element when user select option the change event will trigger and set React state

File

HTML doesn't support setting value to file inputs as this could pose a security risk. However, we can still capture the user-selected file(s) via event handling.

import { ChangeEvent, useCallback, useState } from "react";

export const FileInput = () => {
  const [_value, setValue] = useState<File>();

  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    const fileList = event.target.files;
    const newFile = fileList?.[0] ?? undefined;
    setValue(newFile);
    console.log(newFile);
  }, []);

  return (
    <>
      <div>
        <label htmlFor="file">Choose File:</label>
        <input type="file" id="file" onChange={handleChange} />
      </div>
    </>
  );
};

In the example above, we listen to the input field’s change event. When a user selects a file, the handleChange function is called, where we can then process the selected file accordingly.

Handling Form Submissions

Handling form submissions in a React application typically involves capturing user input, validating the data, and handling the submitted data by performing an action, like making a request to an API, or updating the application's state. We will describe the steps and best practices for handling form submissions in a React.js application.

Steps for Handling Form Submissions in React

1. Capture user input with value property and onChange event: The first step in handling form submissions is capturing user input using element prop value to force element to show what value it should be and onChange event to track what is user input to change current React state to show on element.
2. Prevent default form submission behavior with "preventDefault function in submit event": By default, when a form is submitted, the page will refresh and the form data will be sent to the server. In React, we want to handle the form submission in client side by prevent default event when user submit <form> element.
3. Create a method to handle form submission: Now that we have captured user input and prevented the default form submission behavior, we need to create a React method that will manage the form submission and perform necessary actions (e.g. validate user input, sending data to an API, updating the application state).
4. Call the method to submit form: We will call the method to validate the form, make a call to the backend API and update local state.

Example: Handling Form Submissions

import { ChangeEvent, useCallback, useState, useMemo } from "react";

function useInputValue() {
  const [value, setValue] = useState<string>("");
  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  }, []);
  return [value, handleChange];
}

export const Login = () => {
  const [username, handleChangeUsername] = useInputValue();
  const [password, handleChangePassword] = useInputValue();
  const [remember, setRemember] = useState<boolean>(false);
  const handleChangeRemember = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      setRemember(event.target.checked);
    },
    []
  );

  const result = useMemo(() => {
    return JSON.stringify(
      {
        username,
        password,
        remember,
      },
      null,
      2
    );
  }, [username, password, remember]);

  const handleSubmit = useCallback<FormEventHandler>(
    (event) => {
      event.preventDefault();
      console.log(result);
    },
    [result]
  );

  return (
    <>
      <div className="form">
        <h2>Login</h2>
        <div>
          <form onSubmit={handleSubmit}>
            <div>
              <label htmlFor="username">Username</label>
            </div>
            <div>
              <input
                id="username"
                value={username}
                onChange={handleChangeUsername}
              />
            </div>
            <div>
              <label htmlFor="password">Password</label>
            </div>
            <div>
              <input
                id="password"
                value={password}
                onChange={handleChangePassword}
              />
            </div>
            <div className="checkbox">
              <input
                type="checkbox"
                checked={remember}
                onChange={handleChangeRemember}
              />
              Remember me
            </div>
            <button className="submit" type="submit">
              Submit
            </button>
          </form>
        </div>
      </div>
      <div>{result}</div>
    </>
  );
};

For live demo and codes, please click on see demo.

What about form validation?

I intentionally not include form validation because I think it deserves a place of its own. Form validation is crucial to maintaining the integrity of your data and improving the user experience. I plan to explain how form validation works and different ways to validate forms in the next article.

Conclusion

By adhering to the concepts, methods, and tips provided in this guide, you can efficiently work with forms in React without the need for any external libraries. We encourage you to experiment further and keep enhancing your knowledge in React form development.

Once you are comfortable with the fundamental, it's perfectly normal to use a form library for your work. Although there are some learning curves, you can write cleaner codes and develop forms faster so you can focus on tackling more difficult tasks. If you are planning to use a form library, you may want to consider factors like feature limitations and maintainability. Here is an article by my colleague, 🔥 5 Best Libraries to Develop React.js Forms 2024 to get you started.

📘 Bonus Tool: Add React PDF Support in Minutes

Looking to enhance your React project with reliable document viewing? React PDF Kit gives you the tools to integrate smooth, fully native PDF rendering without reinventing the wheel. It’s developer-friendly, framework-consistent, and built for modern React apps.

🛠️ Start building with our React PDF Viewer component → Explore the docs

PDF files are everywhere but working with PDFs in a React.js project can be frustrating. You might run into clunky plugins, awkward iframes, or glitches that break the user experience. PDF.js gives you a powerful, open-source JavaScript library to display and interact with PDF files right in the browser.

Now, figuring out how to use PDF.js in your React project can be daunting at first. To leverage PDF.js's capabilities, it's important to understand how its layered structure works.

If you’ve ever wondered, “How do I highlight text selection?” or “How do I interact with links inside the PDF?” or even “How do I build advanced features like annotations?”, the answer usually lies in understanding these layers.

In this guide, you'll see how PDF.js splits content into layers, what those layers do, and how you can use them in your next React project. Let’s get going!

React PDF Kit: Flexible and Powerful React PDF Viewer

Before diving into the technical side of things, let me introduce you to React PDF—a library I’ve been working on: React PDF Kit is a handy PDF Viewer that renders PDFs right within your React.js or Next.js app. It packs over 20 features, including out-of-the-box default toolbar, customization and responsive design, so your users never have to leave your site to interact with your documents.

React PDF can integrated into various applications whether it's for a Document Management System, Workflow Management System, AI tool or simply as a PDF reader.

If that sounds interesting, I’d love for you to give React PDF a try. Your support helps me keep creating awesome tools and tutorials like this one. ❤️

Overview of PDF.js Layers

Before we dive in, Here’s a quick overview of the four main layers in PDF.js. Each layer handles a specific aspect of rendering or user interaction:

1. Canvas Layer: This layer draws the core visuals of your PDF—shapes, images, and text as graphics. It forms the base of your PDF Viewer.
2. Text Layer: Placed above the canvas, this layer lets users select and search text.
3. Annotation Layer: This layer manages interactive items like links, form fields, and highlights, so users can click, enter information, or move around the document.
4. Structural Layer: This layer keeps everything in order, handling layout, alignment, and scaling for all other layers.

By separating these roles into different layers, PDF.js stays organized and easy to update when you need to adjust or add features.

Let’s start by creating a fresh React project to integrate PDF.js.

Step 1: Set up a React.js Project

In this article, I use Codepen as a code editor. If you want to follow along, feel free to follow along the steps below.

1. Create a new Pen on CodePen.
2. Click the Settings button (top-right corner of the editor).
3. In the Pen Settings dialog:

• Go to the JavaScript tab.
• Set the JavaScript Preprocessor to 'Babel'.

Under 'Add External Scripts / Pens', search for and add: react & react-dom

4. Click Save & Close.
5. Now you can write React code using JSX in the JavaScript editor like below.

Step 2: Integrate PDF.js into a React project

First, let’s configure your React project to use the pdfjs-dist library.

• Open Pen Settings: Click on the Settings button at the top of your Pen.
• Go to JavaScript Tab: In the popup, switch to the JS tab.
• Add Packages In the Add Packages box, search for and add pdfjs-dist.
• Save and Close: Click the button to apply changes
• Update Import Statement CodePen might auto-generate an import that doesn't work correctly. Replace it like so

 // ❌ Wrong (auto-generated)
 // import pdfjsDist from "https://esm.sh/pdfjs-dist";

 // ✅ Correct
 import * as PDFJS from "https://esm.sh/pdfjs-dist";

• Add PDF.js Worker and Configure It You'll need to explicitly import and configure the worker. Here's the complete setup

 import React from "https://esm.sh/react";
 import ReactDOM from "https://esm.sh/react-dom/client";
 import * as PDFJS from "https://esm.sh/pdfjs-dist";
 import * as PDFWorker from "https://esm.sh/pdfjs-dist/build/pdf.worker.min";

 try {
   PDFJS.GlobalWorkerOptions.workerSrc = PDFWorker;
 } catch (e) {
   window.pdfjsWorker = PDFWorker;
 }

Explanation Before loading the PDF, we need to configure the PDF worker. The worker is responsible for processing the PDF in a separate thread, improving performance.

That’s it! You’re now set up to start experimenting with PDF.js layers within a React environment. So let's get to the layers.

1. Canvas Layer

Purpose

The Canvas Layer is the foundation—it’s where PDF.js draws the visual elements such as images, shapes, and text (as graphics). Essentially, what you see on-screen is coming from this layer.

How It Works

• PDF.js uses the HTML <canvas> element to display the PDF's visual content
• It utilizes the browser's 2D canvas API for high-performance rendering.
• This means your PDF content will look consistent and accurate across various screen sizes and devices.

Use Cases

• Ideal for non-interactive or static PDF content.
• It renders the document as an image, ensuring PDF’s fonts, colors, and layouts are consistent across all devices.

Example of Canvas Layer Code with React

Here’s a quick CodePen demo showcasing a minimal Canvas Layer setup in React.js.

📜 How the Code Works

Below, I’ll walk through the major steps for rendering a PDF page onto the canvas.

(1) Fetching and Loading the PDF

const PDF_SRC = "https://pdfobject.com/pdf/pdf_open_parameters_acro8.pdf"
...
React.useEffect(() => {
  processLoadingTask(PDF_SRC)
}, [])
function processLoadingTask(source) {
    const loadingTask = PDFJS.getDocument(source);
    loadingTask.promise
     .then((docProxy) => { ... })
     .then((page) => {
        ...
        canvasLayer.current.width = width;
        canvasLayer.current.height = height;
        const context = canvasLayer.current.getContext("2d");
        const renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        return page.render(renderContext);
     })
 }

Explanation:

• The processLoadingTask method starts the PDF loading process using PDFJS.getDocument(source) from pdfjs-dist.
• Once the PDF is loaded from PDF_SRC, we obtain a docProxy—a PDF document instance that contains all pages of the PDF.
• In this example, only the first page is used for rendering.
• The total number of pages is retrieved from docProxy.numPages and stored in the totalPages state.

(2) Rendering the Canvas Layer

 ...
 const canvasLayer = React.useRef()
 const [pdfDimension, setPdfDimension] = React.useState({
   width: 0,
   height: 0
 });
 ...
 return ( 
     ...
      <div
        class="pdf__canvas-layer"
        style={{
         height: `${pdfDimension.height}px`,
         width: `${pdfDimension.width}px`,
         border: '1px solid #dfdfdf',
         margin: '0 auto'
        }}
      >
       <canvas ref={canvasLayer} />
      </div>
     ... 
 )

Explanation

After the PDF is loaded and we have the first page object then:

• Scales the canvas to match the PDF page dimensions by updating pdfDimension.
• A <canvas> element (canvasLayer) is used to render the PDF page as an image.
• The rendering process is handled by page.render(renderContext), where canvasContext paints the page content onto the canvas.

This ensures the final output accurately matches the original PDF’s appearance.

2. Text Layer

Purpose

The Text Layer ensures that the text in your PDF is selectable, searchable, and accessible. While the Canvas Layer does the heavy lifting of rendering visuals, the Text Layer is what lets you highlight and copy actual text.

How It Works

• PDF.js extracts the text content separately from the PDF.
• It positions each piece of text exactly over the underlying canvas, using absolutely positioned <div> elements.
• Even though you might not see these text <div> visually (they’re often transparent), they’re there to support selection and searching.

Use Cases

• Enable text selection and copying from the PDF.
• Text layer is crucial for accessibility, as it enables screen readers to interpret the content.
• Provide text searching and highlighting within the PDF viewer.
• Keep the text aligned with the rendered PDF page

Text layer Code Example

Here’s a React.js CodePen example that demonstrates a Text Layer in action:

With this text layer, you can use your mouse to select text directly on the PDF.

📜 How the Code Works

(1) Fetching and Loading the PDF

Identical to the steps in the Canvas Layer—we load the PDF document first.

(2) Structuring the Layers

return (
  ...
  <div class="pdf-layers" style={{ ... }} >
    <div class="pdf-layer__canvas">
       <canvas ref={canvasLayer} />
    </div>
    <div ref={textLayer} class="pdf-layer__text" />
  </div>
)

Explanation:

• The pdf-layers is a container that holds both the Canvas Layer and the Text Layer.
• The Canvas Layer (canvasLayer) displays the PDF page visually.
• The Text Layer (textLayer) is styled to sit on top of the canvas, enabling text selection.

(3) Rendering the Text Layer

function renderTextLayer(page) {
   const viewport = page.getViewport({ scale: 1 });
   const { scale } = viewport;
   textLayer.current.style.setProperty("--total-scale-factor", `${scale}`);
    page.getTextContent().then((content) => {
      const renderTask = new PDFJS.TextLayer({
        container: textLayer.current,
        textContentSource: content,
        viewport: viewport.clone({ dontFlip: true })
      });
      return renderTask.render();
    });
  }

Explanation:

• Render the text layer with renderTextLayer(page) function.
• page.getTextContent() retrieves the text data from the PDF page.
• This data is passed into a new PDFJS.TextLayer, specifying:
  • container: The DOM element where the text will be rendered.
  • textContentSource: Extracted text data from the PDF page.
  • viewport: Define text positioning and scaling.
• renderTask.render() overlays invisible but selectable text <div> over the canvas.
• Check the CSS panel in CodePen to understand how the canvas and text layers are stacked together.

3. Annotation Layer

Purpose

The Annotation Layer handles interactive elements like hyperlinks, highlights, form fields, and comments. If you need your PDF viewer to support internal linking (jumping to different pages), or if your PDFs have fillable forms, this layer is for you.

How It Works

• PDF.js extracts annotation data (links, form fields, etc.) from the PDF.
• It overlays these data as interactive HTML elements (e.g. <a>, <input>, <textarea>), which sit above the Canvas Layer and Text Layer positioned using CSS.
• This layer ensures that users can click, type, and interact without altering the PDF’s static visuals.

Use Cases

• Clicking on links within PDF to navigate between pages.
• Rendering highlights, underlines, and notes from PDF annotations.
• Displaying interactive form fields within a PDF.

Annotation layer Code Example

Check out this CodePen example on the Annotation Layer for React.js:

You can click the links inside the Codepen to change the PDF's page.

📜 How the Code Works

(1) Fetching and Loading the PDF

Again, the same initial PDF loading steps as before.

(2) Structuring the Layers

return (
  ...
  <div class="pdf-layers" style={{ ... }} >
    <div class="pdf-layer__canvas">
       <canvas ref={canvasLayer} />
    </div>
    <div ref={textLayer} class="pdf-layer__text" />
    <div ref={annotationLayer} class="pdf-layer__annotation" />
  </div>
)

Explanation:

• We add another <div> for the Annotation Layer within pdf-layers.
• The Annotation Layer is positioned on top of the Canvas Layer and Text Layer.

(3) Rendering the Annotation Layer

 ....
 const annotationLayer = React.useRef();
 ...
 function getAnnotationsAsync(page) {
    return page.getAnnotations({ intent: "display" });
 }
 function renderAnnotationLayer(page) {
    const viewport = page.getViewport({ scale: 1 });
    annotationLayer.current.replaceChildren();
    getAnnotationsAsync(page).then((annotations) => {
      annotations.current = annotations;
      const pdfAnnotationLayer = new PDFJS.AnnotationLayer({
        div: annotationLayer.current,
        ...
      });
      return pdfAnnotationLayer.render({
        ...
        annotations,
        ...
      });
    });
 }

Explanation:

• getAnnotationsAsync() retrieves all annotation data from the PDF page—such as links, form fields, and highlights.
• The viewport is cloned using viewport.clone({ dontFlip: true }) to ensure correct positioning and scaling for the annotation layer.
• renderAnnotationLayer(page) handles rendering by:
  • Clearing or replacing any existing annotation elements inside the annotationLayer.current.
  • Creating a new PDFJS.AnnotationLayer instance to manage rendering.
  • Calling pdfAnnotationLayer.render({ ... }) with: The annotations retrieved from the page, the cloned viewport, the container where annotations should appear, and so on.

This ensures that annotations are accurately rendered on top of the PDF page.

(4) Handling Internal Link Clicks

...
const annotationEventAbortCtrl = React.useRef();
...
function bindAnnotationLayerEvent(page) {
    if (annotationEventAbortCtrl.current) {
      // Already binded
      return;
    }
    annotationEventAbortCtrl.current = new AbortController();
    const { signal } = annotationEventAbortCtrl.current;
    annotationLayer.current.addEventListener(
      "click",
      async (event) => {
        let annotationTarget = event.target.parentNode;
        if (!annotationTarget) {
          return;
        }
        const id = annotationTarget.dataset.annotationId;
        if (!id) {
          return;
        }
        const annotationLinkId = (await getAnnotationsAsync(page)).find(
          (ele) => ele.id === id
        );
        if (!annotationLinkId) {
          return;
        }
        const pageIndex = await pdfDocProxy.current.getPageIndex(
          annotationLinkId.dest[0]
        );
        setCurrentPage(pageIndex + 1);
      },
      { signal }
    );
  }

Explanation:

• This function listens for clicks on internal links (annotations) in the PDF.
• When a user clicks a link, it checks if the clicked target has an associated annotationId.
• If found, it looks up the annotation to get its destination using getAnnotationsAsync(page).
• Then it uses getPageIndex() to find which page the link points to.
• Finally, it updates the current page with setCurrentPage() to navigate to the target page.

(5) Handling Page Navigation

A simple navigation bar lets users switch between pages.

...
const [currentPage, setCurrentPage] = React.useState(3);
const [totalPages, setTotalPages] = React.useState(0);
...
React.useEffect(() => {
  processRenderPdfLayers(PDF_SRC);
}, [currentPage]);
...
return (
 <div class="page-navigation">
    <button
       disabled={currentPage <= 1}
       onClick={() => setCurrentPage(currentPage - 1)}
    >
     &larr;
    </button>
    <span>
     {currentPage} / {totalPages}
    </span>
    <button
        disabled={currentPage >= totalPages}
        onClick={() => setCurrentPage(currentPage + 1)}
    >
     &rarr;
    </button>
  </div>
)

Explanation:

• The currentPage value updates when navigation buttons are clicked.
• The useEffect with currentPage dependency ensures that all layers are re-rendered when the page changes.
• This ensures all layers—Canvas, Text, and Annotation—stay in sync.

4. Structural Layer

Purpose

Think of the Structural Layer as the master layout manager. It keeps the Canvas, Text, and Annotation layers correctly aligned, scaled, and positioned when users zoom in or out, or when the window is resized.

This layer is a must-have when creating a PDF viewer as it serves as the foundation that glues all other layers together.

How It Works

• The Structural Layer is typically implemented by a container element (<div>) that wraps all other layers.
• Maintain consistent positioning among layers so they don’t drift apart during zooms or scrolls.
• Act as the foundation that ties everything together, so your PDF viewer remains cohesive.

Use Cases

• Ensure a consistent user experience across different screen sizes and resolutions.
• Enable smooth zooming by scaling all layers proportionally.
• Centralize navigation and layout logic (e.g. controlling how the viewer scrolls from one page to another.)

In our code examples, the <div ref="pdfLayersWrapper" class="pdf__layers"> element serves as the Structural Layer, wrapping for other layers:

<div ref="pdfLayersWrapper" class="pdf__layers">
  <div class="pdf__canvas-layer">
    <canvas ref="canvasLayer" />
  </div>
  <div ref="textLayer" class="pdf__text-layer"></div>
  <div ref="annotationLayer" class="pdf__annotation-layer"></div>
</div>

Why is this important?

• The Structural Layer wrapper ensures the Canvas, Text, and Annotation Layers all stay in sync, even when you zoom or flip through pages.
• You can customize the wrapper to handle special behaviors like lazy-loading pages, scroll snapping and other performance optimizations.

How Layers Work Together

Here’s how all four layers in PDF.js work together in harmony:

1. Rendering Process: Each page is first drawn onto the Canvas Layer (visual content). Next, the Text Layer is layered on top to enable selection and searching. Finally, the Annotation Layer is placed at the very top, providing interactive elements like links and form fields.
2. Interactivity: The Annotation Layer handles user events (like clicking on links or typing into form fields), while the Text Layer ensures text can be highlighted, copied, or searched.
3. PDF Viewer: The Structural Layer wraps everything up, ensuring that zooming, resizing, and navigation across pages remain consistent. It keeps all layers aligned and responsive, so users get a polished viewing experience.

Beyond the Fundamentals

PDF.js gives you the basics for working with PDFs in JavaScript, but plugging it into a React project means you'll want more control.

• Customize UI: Use React hooks and state to create a smooth, custom viewer that fits right into your app.
• Handling Large PDFs: For large PDFs, skip loading the whole file up front. Choose lazy loading or virtualization to keep your app feeling quick, even with hundreds of pages.
• Adding Toolbar Control: Build your own toolbar with features like zoom, page jumps, and download options, so users get a great experience.

With the right setup, PDF.js and React work together to handle big files and let you shape the viewer to fit your project.

Conclusion

I’ve worked with PDF.js across many React.js projects, from straightforward file previews to detailed, interactive document tools. Its layered structure is always the foundation.

This setup matters because you get full control over each part of the PDF viewer. You can tune specific layers to boost performance or improve the user interface. It’s easy to refine how your viewer responds to things like search, form input, or user actions.

By understanding these layers, you will be able to optimize PDF.js implementations, customize features, and deliver a better user experience. Whether you’re building a simple React PDF Viewer or a complex Document Processing System, leveraging these layers effectively will set your project up for success.

React PDF Kit: The PDF Viewer Built for React.js Developers 🚀

If you enjoyed this article, I’d love for you to check out React PDF Kit. It’s a PDF Viewer built from the ground up for React and Next.js applications. Whether you’re just starting out or already running a large-scale app, React PDF got you covered.

Designed with developers in mind, React PDF offers:

• Out-of-the-box features - Check out the Getting Started guide
• Customizable look and feel - Learn how to customize components
• Web Responsive layouts - See how the React PDF Viewer renders on mobile view
• Developer-friendly APIs - Explore the full API documentation for more information

Your support encourages me to keep building tools and publish content for the React community. Thank you for checking out React PDF in advance! 🙏

PDF files are everywhere-from invoices to reports, contracts, and learning materials. When working on React.js projects, displaying PDFs can be simple or complex, depending on your needs. If you only need to show a static document, browser options like iframes might do the trick. But if your users need better viewing, zooming, searching, or interactive features, you’ll need a dedicated PDF viewer.

Choosing a PDF viewer for a React.js or Next.js application depends on your project’s needs. Here’s a quick breakdown of six options to consider:

• PDF.js (Open Source): Reliable, no-frills viewing for simple applications.
• react-pdf (Open Source): Lightweight wrapper for PDF.js, built for React.
• React PDF (Paid): A newer library with a more complete feature set than react-pdf. Customizable and powerful.
• React PDF Viewer (Paid): Provide a more comprehensive feature set than react-pdf. It offers a polished and customizable UI.
• PDF.js Express (Hybrid): Start with free basics, with optional premium add-ons.
• Syncfusion React PDF Viewer (Hybrid): Feature-rich, enterprise ready, ideal for complex needs.

In this article, I’ll be comparing six popular PDF libraries for React.js. Each library has its strengths and weaknesses, and my goal is to help you pick the best one for your project’s unique needs.

Disclaimer: I’m part of the React PDF Kit team.

Why a Good PDF Viewer Matters

When your React.js or Next.js app needs to display documents, the quality of your PDF viewer shapes both development and user experience. Whether you’re building a simple PDF document viewing system, an educational platform, or an AI-driven document management system, having the right viewer simplifies your work and helps keep users happy.

What to Look For in a React PDF Viewer

When selecting a PDF viewer, a few important factors can determine whether it will fit your project needs:

• Quick Setup: Choose a library that fits smoothly into your React or Next.js project and simplified maintenance.
• Ready-to-Use Features: Look for built-in tools like search, zoom and page navigation so you can launch without heavy tweaks.
• Easy Customization: The ability to style, extend, and configure is important for aligning with specific requirements.
• Fast Performance: Fast loading and smooth rendering, especially for big PDFs, are essential.
• Active Support: Documentation and a helpful community make troubleshooting easier and better long-term support.

With these points in mind, let’s check out some top choices!

Open Source Options

1. PDF.js

PDF.js is a well-known open-source JavaScript library created by Mozilla for rendering PDFs directly in the browser. The library allows developers to display PDF documents without relying on external plugins or native applications. PDF.js renders PDFs by converting each page into HTML5 canvas elements, ensuring that the content is viewable directly in the browser.

Developers who need a simple, cost-effective solution for displaying PDFs in React.js applications often use PDF.js as a base library. Because it’s a standalone JavaScript library, it’s compatible across multiple frameworks. However, it’s not built specifically for React, so React developers may need to use wrappers or custom integration to make the most of it.

Strengths:

• Large, active community and extensive documentation.
• Free to use, with a simple API that allows basic PDF rendering.
• Actively maintained, so updates and support are consistent.

Limitations:

• Not specifically designed for React; additional setup or wrappers may be required for integration.
• Limited customization, so advanced functionality (e.g., annotations) requires additional coding.

Best Suited For: Simple applications where basic PDF rendering is suffices. While customization is possible, integrating advanced features with React.js requires extensive effort as the library is not designed specifically for the framework.

2. react-pdf

react-pdf is a lightweight wrapper around PDF.js, specifically tailored for React applications. While PDF.js itself provides a core PDF rendering engine, react-pdf simplifies the integration process for React developers, making it easier to render PDFs without writing extensive code. By using react-pdf, React developers can enjoy the benefits of PDF.js without needing to manage the complex JavaScript integration manually.

react-pdf is ideal for applications that require basic PDF display but don’t need extensive functionality like annotations or form filling. It’s popular in small projects and MVPs where ease of use and quick implementation are prioritized.

Strengths:

• React compatibility out-of-the-box, which simplifies integration.
• Free and open-source, with a straightforward API.
• Great for smaller projects and quick prototyping.

Limitations:

• Limited advanced features, so it’s best suited for basic viewing.
• Minimal control over rendering or layout; not ideal for highly customized projects.

Best Suited For: Small to mid-sized apps, MVPs, and projects that need quick, simple PDF viewing without a need for default toolbar.

Paid Options

3. React PDF Kit

React PDF Kit is a React-native solution designed specifically for React.js applications. Unlike generic libraries, it integrates seamlessly with React projects, offering features that cater to both simple and complex PDF requirements. Its native compatibility ensures that developers can focus more on building their applications and less on managing integration challenges.

React PDF stands out for its ease of use, performance, and the level of customization it offers. It’s particularly suited for projects that demand robust PDF features, such as theme customization, responsive design, and advanced interaction capabilities like annotations.

Strengths:

• Easy to integrate, with React-specific functions or methods since it’s React-native.
• Optimized for quick loading and smooth rendering to handle large PDF files.
• Adaptable to any project’s design and functional needs with various APIs to leverage or customize from.
• Ensures a seamless experience on both desktop and mobile devices.

Limitations:

• Newer library so it still need a bit more time to catch up to other libraries.
• Some advanced enterprise-grade features, such as built-in annotation and document editing, may not be available.

Best Suited For: React PDF is perfect for React.js applications requiring a PDF viewer built specifically for react. It provides a powerful, native solution with flexibility, high performance, and extensive customization options, making it ideal for projects that prioritize responsive design and seamless user experiences.

Remark: Annotation feature set is in the 2026 roadmap.

4. React PDF Viewer

React PDF Viewer is a commercial library tailored for React developers who want more control over PDF viewing without starting from scratch. It comes with a clean, modular architecture and includes built-in features like annotations, search, and form handling. Its plugin-based system also allows for a degree of customization, especially for projects that need UI flexibility out of the box.

That said, React PDF Viewer hasn’t seen active updates since early 2023, which may pose issues for projects using the latest React versions or expecting long-term support. While it’s a capable tool for building polished PDF experiences, teams should weigh its feature set against ongoing maintenance needs before committing.

Strengths:

• Feature-rich, with support for annotations, editing, search, and form filling.
• Optimized for large-scale applications, handling complex PDFs efficiently.
• Excellent customer support and thorough documentation.

Limitations:

• Paid license required for full features
• No active updates or support since March 2023
• May not work well with the latest React releases

Best Suited For: Apps that need a polished PDF experience and advanced features, as long as you’re okay with no recent updates or ongoing support.

Hybrid Options

5. PDF.js Express

PDF.js Express offers a unique hybrid model for teams who want flexibility in scaling PDF capabilities. Based on PDF.js, it provides a free version with basic features and the option to unlock premium functionality through paid upgrades. This model is ideal for projects that may need simple viewing at first but might require additional features like annotations, text search, and form filling as they grow.

PDF.js Express is compatible with React.js and is easy to set up, making it accessible to both small projects and larger applications. The option to scale up as needed gives developers flexibility in budgeting and feature selection, allowing projects to remain adaptable.

Strengths:

• React-compatible and easy to integrate, with a streamlined setup for quick PDF viewing implementation.
• Provides a range of premium features (annotations, form filling, text search) as optional upgrades, which allows developers to start small and add features as the project grows.
• Strong documentation and support for both free and premium features, making it a developer-friendly option with a low entry cost.

Limitations:

• Free version is limited in functionality; advanced features require a paid license.
• For applications needing high customization or many features, a full SDK like Nutrient or Apryse may be a better choice.
• According to its documentation, core functions have not been updated since July 2022

Best Suited For: Projects starting with free features and scaling to premium capabilities like annotations and form filling as long as you’re okay with no recent updates to its core functions.

6. Syncfusion React PDF Viewer

Syncfusion React PDF Viewer is an enterprise-focused hybrid (free and paid) library. It offers a wide range of PDF tools, including advanced annotations, text search, and form support. Syncfusion is free under its community license, but costs climb quickly as your team starts to grow.

Strengths:

• React-compatible and easy to integrate, with a streamlined setup for quick PDF viewing implementation.
• Provides a range of premium features (annotations, form filling, text search).
• Enterprise-ready, with high performance and strong support.

Limitations:

• Syncfusion comes with a whole suite of other components which can be overly complex and overwhelming
• Documentation can be difficult to navigate, making it not so developer-friendly to try
• Can be expensive if you don’t qualify for the community license

Best Suited For: Large-scale projects, companies with advanced requirements, or any app that needs full-featured PDF tools.

Quick Comparison

Conclusion and Recommendation

If you want a simple, budget-friendly solution for PDF viewing in React, start with an open-source library like PDF.js or react-pdf. For more advanced features, polished UI, or enterprise needs, a paid library like React PDF, React PDF Viewer, or Syncfusion is better. PDF.js Express sits in the middle, letting you scale features and cost as your project grows.

Always check each library’s documentation and support before making your choice. Think about your project’s scope, future needs, and budget to pick the right library for your project.

🙌 React PDF Kit: Flexible and Powerful React.js PDF Component

If you feel like this article helped you, please check out React PDF, a handy PDF Viewer that renders PDFs right within your React.js or Next.js app. It packs over 20 features, including out-of-the-box default toolbar, customization and responsive design, so your users never have to leave your site to interact with your documents.

React PDF can integrated into various applications whether it’s for a Document Management System, Workflow Management System, AI tool or simply as a PDF reader.

It would encourage me to continue creating even more content. Thank you in advance! 🙏

When I first started building React apps, this decision felt overwhelming. There were so many options, each with its features and trade-offs. It’s like choosing the playlist for a road trip, it can make or break the journey. But over time, I learned that a great UI library isn’t just about flashy components. It saves you hours, handles repetitive tasks, and even solves common problems like accessibility and responsiveness right out of the box.

Now that we are in 2025, there are a few standout libraries that I’ve used directly in my own projects, and others I’ve kept an eye on through the dev community. They’re reliable, developer-friendly, and packed with features I’ve come to love.

Ready to check them out? Let’s dive in! 🚀

📄 Quick Note: React PDF Kit for Document Viewing

Before we get into the top UI libraries, here’s something that I’ve been working on! If your React app needs to display PDFs without hassle, check out our React PDF Viewer. It renders PDFs directly in your app using React components-no iframes, no clunky viewers, just smooth, native integration.

Now let’s get back to those libraries you’re here for. 😊

Leading React.js UI Libraries in 2025

Each library on this list brings its own flavor and strengths to the table. Here are five libraries dominating the React ecosystem this year, ranked based on their popularity by npm weekly download.

1. Material-UI (MUI) and Its Continued Dominance

No surprises here. Material-UI, or MUI for short, is still a top choice for many developers-and for good reason. Inspired by Google’s Material Design, it’s packed with pre-built, highly polished components that look great right out of the box.

Here’s what making MUI a favorite:

• Effortless Customization: Themes, colors, typography — it’s all ridiculously easy to tweak. Whether you want Google’s Material Design “look” or your own flair, MUI’s got you covered.
• Comprehensive component library: Buttons, modals, tables, navigation — you name it, MUI probably has it. It’s like the Swiss Army knife of UI libraries.
• Active community and ecosystem: With great docs, tons of tutorials, and a thriving developer community, you never feel stuck.

Who is it for:

• Developers looking for a scalable, professional UI framework that works well for projects of all sizes.
• Teams that want out-of-the-box, production-ready components without sacrificing flexibility.

As of March 2025, MUI continues to dominate, boasting over 95,000 GitHub stars and 4 million+ weekly downloads 📈

Learn more on https://mui.com/

2. Ant Design: A Versatile and Feature-Rich UI Library

Ant Design isn’t just for enterprise apps-it’s a powerful, well-designed UI library that works great for projects of all sizes. Originally developed by Alibaba, it has become one of the most widely used React UI frameworks thanks to its extensive component set, polished design, and flexibility.

Here’s why Ant Design stands out:

• Rich components library: Tons of pre-built components to cover almost every scenario you can think of, from date pickers to advanced table handling.
• Customizable and themeable: While it leans towards a certain aesthetic out of the box, tweaking the design system is straightforward.
• Internationalization: Built-in support for multiple languages makes it ideal for global applications.

Who is it for:

• Developers building enterprise-grade applications that require scalability and a refined UI.
• Teams looking for a polished, well-documented UI framework with strong community support.
• Anyone who wants a feature-rich, consistent design system without reinventing the wheel.

As of March 2025, Ant Design continues to grow in popularity, with a thriving GitHub community of over 94,000 stars and over 1.4 million weekly downloads.

Learn more on https://ant.design/

3. Chakra UI: Accessibility and Usability First

If you’re not already using Chakra UI, this may be the year to give it a shot. Known for its developer-friendly API and accessibility-first approach, Chakra UI makes building modern, user-friendly React applications a breeze.

Here’s why developers love Chakra UI:

• Out-of-the-box accessibility: All components are screen-reader friendly and keyboard accessible by default. You don’t have to lift a finger.
• Built-in styling: Chakra’s prop-based styling system makes it incredibly easy to customize designs without writing complex CSS.
• Unmatched flexibility: Whether you’re building a quick demo or a full-fledged production app, Chakra UI scales beautifully to your needs.

Who is it for:

• Developers who want modern, accessible, and intuitive UI components without the hassle.
• Teams looking for a design system that scales seamlessly across different projects.

As of March 2025, Chakra UI has gained over 38,800 GitHub stars and sees 587,000+ weekly downloads, proving its continued popularity.

Learn more on https://mui.com/

4. Mantine: Your New Favorite Toolkit

If you’re a fan of “all-in-one” solutions, meet Mantine. This library flies under the radar compared to giants like MUI but is quickly building a loyal following. Why? It’s fast, modern, and incredibly developer-friendly.

Here’s what makes Mantine stand out:

• 60+ Beautiful, Functional Components: From basic buttons to complex tables, Mantine covers a wide range of use cases right out of the box.
• Built-In Utility Hooks: No need for external libraries for things like form handling, modals, or notifications — it’s all built-in.
• Full Theme Support: Dark mode, RTL, custom themes — you name it, it’s supported. You get design flexibility without the overhead.

Who is it for:

• Developers who value speed, flexibility, and simplicity.
• Teams juggling tight deadlines but still needing room for customization.

As of March 2025, Mantine continues to gain traction, boasting 28,000 GitHub stars and over 490,000 weekly downloads.

Learn more on https://mantine.dev/

5. Shadcn UI: Tailwind Meets Radix

Let’s talk about the new kid on the block: Shadcn UI. This library is rising fast, thanks to its smart combination of Tailwind CSS and Radix UI. Think of it as a middle ground between pre-built components and complete customization.

Here’s why Shadcn UI is gaining popularity:

• Built on Tailwind: If you’re already a fan of Tailwind CSS, this library feels like an extension of your toolkit.
• Pre-built yet customizable: Components come with a clean, modern look but are designed for easy customization to fit any design system.
• Lightweight performance: It’s designed with performance in mind, ensuring your app stays fast and lean.

Who is it for:

• Developers who want a Tailwind-native UI solution without the rigidity of traditional component libraries.
• Teams looking for pre-built, accessible components that don’t sacrifice flexibility.

As of March 2025, Shadcn UI continues to gain traction, boasting 83,000 GitHub stars and over 200,000 weekly downloads.

Learn more on https://ui.shadcn.com/

(Bonus) Radix UI: Precision and Control

Not every project needs a fully-styled, opinionated design system. Sometimes, you need a library that gives you all the building blocks but lets you have full control over the final look. Here’s where Radix UI comes in. It offers accessible, unstyled primitives that give you the freedom to build UI your way.

Here’s why developers choose Radix UI:

• Unstyled, accessible primitives: You get the raw components — buttons, modals, dropdowns — but the styling is entirely up to you.
• Composability at its core: Every component is designed to work beautifully together without locking you into a rigid structure.
• Accessibility baked in: Similar to Chakra, Radix prioritizes compliance with accessibility standards.

Who is it for:

• Developers who want maximum flexibility in styling while maintaining accessibility.
• Teams looking for a solid foundation of UI components without being locked into a specific design system.

As of March 2025, Radix UI remains on the rise, boasting a thriving GitHub community and over 130,000 weekly downloads.

Learn more on https://www.radix-ui.com/

Conclusion

So, which React.js UI library should you choose for your next project? Let’s recap:

• Use MUI if you want a polished, professional library with tons of components and customizable themes.
• Pick Ant Design if you’re building robust enterprise-grade applications or general-purpose applications.
• Go with Chakra UI for user-first, accessible designs that scale effortlessly.
• Mantine delivers an all-in-one toolkit with utility hooks and excellent TypeScript support.
• Explore Shadcn UI for a Tailwind-powered library that bridges the gap between pre-built ease and creative freedom.
• Otherwise if you need control over every pixel while keeping accessibility top-notch, choose Radix UI.

Every library on this list has its strengths, and the best choice boils down to your project’s needs. Whether you prioritize speed, flexibility, or enterprise-level sophistication, there’s a library here for you.

📢 One More Thing: React PDF Kit

We mentioned React PDF Kit earlier, but it’s worth highlighting again. It effortlessly integrates into React and Next.js environments, offering features like theme customization and responsive layouts out-of-the-box. No need for additional libraries or complex setups-just a straightforward solution for displaying PDFs directly within your application.

If your application requires viewing or interacting with PDF documents, check out React PDF. Your support motivates me to keep creating valuable content for the React community 🙏

Now, get coding, and may your components always render perfectly! 🚀

The most exciting time of the year for developers is here — Black Friday and Cyber Monday 2024! If you’re a JavaScript developer working with frameworks like React, Vue, or Node.js, this is your chance to grab amazing deals on tools, libraries, and resources that will elevate your development workflow.

Whether you’re a seasoned pro or just starting out, these discounts are designed to help you save time, optimize your projects, and sharpen your skills. From UI libraries to hosting solutions, we’ve curated the ultimate list of must-have deals for developers. Don’t miss these exclusive offers — your future self will thank you! 💻✨

🔧 UI Kits, Libraries, and Boilerplates

1. React PDF Kit

For React developers looking for a flexible solution to embed and customize PDF viewers, React PDF offers advanced features in a lightweight package. It supports custom themes, responsive designs, and smooth PDF rendering, making it ideal for applications like reporting tools, document management systems, or dashboards. Designed with developers in mind, React PDF makes handling PDFs effortless.

• Deal: Register now to secure 55% OFF any license at launch
• Period: November 25 — December 5
• Website: React PDF

Disclaimer: I’m part of the team building this product.

2. MDBootstrap

Looking to create stunning, modern UIs? MDBootstrap combines the power of Bootstrap 5 with Material Design, giving you access to sleek, responsive components. With compatibility across React, Vue, Angular, and more, MDBootstrap is a favorite for building user-friendly web applications quickly and efficiently.

• Deal: 98% OFF Advanced plans + 6 months of React, Vue, or Angular features for free
• Period: Black Friday 2024
• Website: MDBootstrap

3. NextReady

Streamline your Next.js development with NextReady, a toolkit offering prebuilt, type-safe components powered by TypeScript, Prisma, and shadcn/ui. It’s perfect for developers who want to focus on building great apps without worrying about boilerplate setup.

• Deal: 63% OFF (Code: BF2024)
• Period: Now — December 2
• Website: NextReady

4. Animate React Native

Animate React Native offers a comprehensive collection of 132+ prebuilt animations designed specifically for React Native applications. These animations include buttons, modals, transitions, and more, helping developers enhance user experience with minimal effort. Whether you’re creating interactive apps or dynamic interfaces, this library saves you significant time by providing ready-to-use animations that seamlessly integrate with your projects.

• Deal: 60% OFF (Code: BF2024)
• Period: November 11 — December 5
• Website: Animate React Native

5. Next Admin

Next Admin is a powerful collection of over 200 professional dashboard elements and 45 unique pages designed for Next.js applications. It provides prebuilt components for creating efficient and visually appealing admin panels, saving developers time on design and functionality. Perfect for building SaaS dashboards, analytics platforms, or internal tools.

• Deal: 40% OFF (Code: BLFCM2024)
• Period: November 29 — December 2
• Website: Next Admin

6. Vue PDF Viewer

If your Vue.js project requires robust PDF functionality, Vue PDF Viewer is the perfect choice. This powerful component allows you to render, display, and interact with PDF documents seamlessly. With features like customizable themes, localization, and responsive layouts, it ensures your users have a smooth experience. Whether you’re building dashboards, document managers, or e-learning platforms, Vue PDF Viewer simplifies PDF handling.

• Deal: 55% OFF any license
• Period: November 25 — December 5
• Website: Vue PDF Viewer

Disclaimer: I’m part of the team building this product.

🛠️ Development Tools

7. DivJoy

Save hours of development time with DivJoy, a tool that generates complete React codebases for SaaS applications. From authentication to payment integrations, DivJoy equips you with everything you need to launch a functional app in minutes.

• Deal: 40% OFF
• Period: Now — November 30
• Website: DivJoy

8. Shipped

Shipped is a Next.js SaaS kit designed for developers who want to launch MVPs quickly. With TypeScript, React, Tailwind, and more, it’s packed with tools to jumpstart your project without reinventing the wheel.

• Deal: 20% OFF (Code: BF2024)
• Period: Black Friday 2024
• Website: Shipped

9. Daito

Simplify multi-factor authentication (MFA) in your applications with Daito’s secure and developer-friendly APIs. Perfect for apps requiring robust user security, Daito saves time and effort when implementing MFA.

• Deal: 50% OFF annual plans over $150 (Code: CYBERMONDAY2024)
• Period: November 25 — December 1
• Website: Daito

10. Mailtrap

Mailtrap simplifies email testing for developers by providing a secure and efficient environment for debugging emails during development. With Mailtrap, you can test, preview, and validate emails before sending them to users, ensuring professional and error-free communication. It’s an essential tool for developers working on apps that rely on transactional or marketing emails.

• Deal: 25% OFF for 12 months (Code: BFCM24)
• Period: Now — December 31
• Website: Mailtrap

11. HelpCrunch

HelpCrunch is an all-in-one customer communication platform designed to streamline support and engagement for businesses. With features like live chat, email automation, and a robust help desk system, it empowers teams to deliver exceptional customer experiences. Whether you’re a startup or an established enterprise, HelpCrunch integrates seamlessly into your workflow, helping you boost engagement and customer retention.

• Deal: 25% OFF your first payment (Code: BFCM2024)
• Period: November 21 — December 2
• Website: HelpCrunch

12. Kaleidoscope

Kaleidoscope is a powerful file comparison tool designed to streamline workflows for developers, designers, and writers. With its intuitive interface, Kaleidoscope allows you to easily spot differences in text, images, and folders, making collaboration and code reviews more efficient.

• Deal: First Year 40% OFF (Code: BLACKFRIDAY2024)
• Period: Black Friday 2024
• Website: Kaleidoscope

🌐 Web Optimization and Monitoring

13. UptimeBeats

UptimeBeats is a reliable uptime monitoring service designed to ensure 24/7 availability for your websites and applications. It tracks response times, provides instant alerts for downtime, and includes features like custom status pages to keep your users informed. Perfect for maintaining high service reliability.

• Deal: 20% OFF (Code: BLACKFRIDAY)
• Period: Now — December 2
• Website: UptimeBeats

14. Nitropack

Nitropack is a leading site speed optimization tool that improves website load times and overall performance. By enhancing user experience and boosting SEO rankings, Nitropack is an essential tool for developers and businesses looking to optimize their online presence.

• Deal: 20% OFF + 17% built-in discount
• Period: November 21 — December 2
• Website: Nitropack

15. Plerdy

Plerdy is a powerful analytics tool for tracking visitor behavior, optimizing conversion rates, and improving user experience. It offers features like heatmaps, session recordings, and SEO analysis to help developers and marketers make data-driven decisions for their websites.

• Deal: 50% OFF (Code: plerdyBF2024)
• Period: Now — December 1
• Website: Plerdy

16. useBouncer

useBouncer is an email verification service that helps developers and businesses improve deliverability rates by validating email addresses. It ensures that your emails reach the right inboxes, reducing bounce rates and improving communication efficiency.

• Deal: 50% more credits
• Period: Black Friday 2024
• Website: useBouncer

17. StatusGator

StatusGator is a unified status monitoring tool that aggregates the status of all your cloud services into one platform. Ideal for keeping track of service outages, it helps developers and teams stay informed about downtime across their tech stack.

• Deal: 20% OFF Starter plans (Code: BLACKFRIDAY2024)
• Period: November 11 — December 12
• Website: StatusGator

18. SuperMonitoring

SuperMonitoring is a comprehensive website monitoring tool that tracks uptime, performance, and errors to ensure website reliability. It’s a great choice for developers and businesses focused on delivering consistent user experiences.

• Deal: 50% OFF, one-time, only for new customers (Code: SUPERBLACK24)
• Period: November 29 — December 5
• Website: SuperMonitoring

🔒 Hosting and Security

19. Beagle Security

Protect your applications with Beagle Security, a penetration testing tool designed to identify vulnerabilities before attackers do. Beagle Security is perfect for developers building secure web apps and APIs.

• Deal: 30% OFF annual plans, 15% OFF monthly plans (Codes: BFADY30 / BFESM15)
• Period: November 25 — December 6
• Website: Beagle Security

20. Cloudways

Simplify your hosting with Cloudways, a managed cloud hosting platform tailored for developers and agencies. With features like free migrations and performance optimization, Cloudways is ideal for hosting eCommerce sites, SaaS applications, and more.

• Deal: 40% OFF for the first 4 months + 40 free migrations (Code: BFCM2024)
• Period: Black Friday 2024
• Website: Cloudways

21. DeployHQ

DeployHQ is a powerful deployment platform designed to help developers automate their code deployment process with ease. It supports integrations with popular version control systems like GitHub, GitLab, and Bitbucket, enabling seamless deployments across multiple environments. Perfect for teams looking to save time and minimize deployment errors.

• Deal: 50% OFF all plans (Code: BLACKFRIDAY50)
• Period: Black Friday 2024
• Website: DeployHQ

22. PocketHost

PocketHost offers lifetime access to hosting up to 250 instances of PocketBase, a backend solution for building modern web apps. Ideal for developers looking for a cost-effective way to manage hosting without recurring fees, PocketHost ensures a reliable hosting experience with easy setup and scalability.

• Deal: Black Friday discount for lifetime access
• Period: November 15 — December 2
• Website: PocketHost

23. HostPapa

HostPapa provides high-performance web hosting services tailored for small businesses, startups, and personal projects. With features like free domain registration, unlimited bandwidth, and a user-friendly control panel, it’s an excellent choice for developers seeking affordable yet powerful hosting solutions.

• Deal: Up to 88% OFF
• Period: Black Friday 2024
• Website: HostPapa

24. Static.app

Static.app provides a reliable platform for hosting static websites with lightning-fast load times and exceptional scalability. Whether you’re hosting a portfolio, blog, or documentation site, Static.app offers developers a seamless way to deploy and manage static sites with ease.

• Deal: 30% OFF (Code: BLACK24)
• Period: Black Friday 2024
• Website: Static.app

📚 E-Books

25. Tao of React

Tao of React offers a practical guide with proven rules for building better React applications. It covers essential topics like application structure, component design, testing, and performance optimization, making it a go-to resource for React developers in 2024.

• Deal: 50% OFF (Code: BLACKFRIDAY)
• Period: Black Friday 2024
• Website: Tao of React

26. React — The Road To Enterprise (TypeScript Edition)

For developers seeking to master TypeScript in React, React — The Road To Enterprise (TypeScript Edition) is a must-read. This book focuses on TypeScript-specific patterns and strategies for building scalable, maintainable React applications.

• Deal: 40% OFF (Code: BLACKFRIDAY)
• Period: Now — December 1
• Website: React — The Road To Enterprise (TypeScript Edition)

27. React — The Road To Enterprise (JavaScript Edition)

React — The Road To Enterprise (JavaScript Edition) is a detailed guide covering advanced patterns, testing strategies, and scalable architecture for large-scale React projects. It’s ideal for developers looking to take their React skills to the next level and build robust applications that can handle enterprise demands.

• Deal: 50% OFF (Code: BLACKFRIDAY)
• Period: Now — December 2
• Website: React — The Road To Enterprise (JavaScript Edition)

28. Tao of Node

Take your Node.js skills to the next level with Tao of Node, a practical guide on architecture, tooling, and performance optimization. Perfect for developers who want to write cleaner and faster Node.js code.

• Deal: 50% OFF (Code: BLACKFRIDAY)
• Period: Black Friday 2024
• Website: Tao of Node

29. Vue — The Road to Enterprise

Learn advanced patterns and techniques for building enterprise-level Vue.js applications with Vue — The Road to Enterprise. This book is a must-read for developers looking to scale their Vue projects.

• Deal: 50% OFF
• Period: Now — December 2
• Website: Vue — The Road to Enterprise

30. BeyondCode

BeyondCode is a comprehensive guide to becoming a more productive and effective programmer. It includes lessons, tips, and best practices to help developers master their craft, making it a valuable resource for developers at all levels.

• Deal: 50% OFF (Code: BLACKFRIDAY24)
• Period: Black Friday 2024
• Website: BeyondCode

🎓 Courses

31. Vue School

Get access to premium Vue.js courses with Vue School, covering everything from Nuxt to TypeScript. Whether you’re a beginner or an advanced developer, these courses are designed to level up your skills.

• Deal: Up to 60% OFF
• Period: Black Friday 2024
• Website: Vue School

32. VSCode Power User

Master Visual Studio Code with the VSCode Power User course. Learn advanced workflows, settings, and over 50 extensions to boost your productivity as a developer.

• Deal: 80% OFF
• Period: Now — December 1
• Website: VSCode Power User

33. Vue Mastery

Vue Mastery provides high-quality Vue.js courses taught by industry experts, including Evan You, the creator of Vue.js. Whether you’re a beginner or an experienced developer, their courses are designed to enhance your Vue.js knowledge and skills.

• Deal: Exclusive Discounts
• Period: Black Friday 2024
• Website: Vue Mastery

34. Vue.js & Nuxt Certification

The Vue.js Certification & Nuxt Certification is the official program to validate your Vue.js/Nuxt expertise. It’s perfect for developers looking to showcase their skills and gain recognition in the Vue.js community.

• Deal: 56% OFF
• Period: Now — December 2
• Website: Vue.js Certification / Nuxt Certification

35. Node CLI Automation

Node CLI Automation is a course that teaches developers how to create efficient and effective CLI tools using Node.js. Learn how to build the automation tools used by millions of developers worldwide.

• Deal: 80% OFF
• Period: Now — December 2
• Website: Node CLI Automation

36. useEffect.dev

useEffect.dev is a comprehensive course designed to help developers master React hooks and build more fluent, efficient React applications. It’s packed with practical examples and actionable insights.

• Deal: $20 OFF (Code: FRIDAY23)
• Period: Black Friday 2024
• Website: useEffect.dev

🎉 Conclusion

Black Friday and Cyber Monday 2024 offer an incredible opportunity for developers to save on tools, libraries, and resources that will supercharge their projects. From enhancing your UI with Vue PDF Viewer and React PDF to improving your workflow with DivJoy or Shipped, there’s something here for every developer.

These deals are only available for a limited time, so don’t wait too long to take advantage of them. If you’re looking for even more Black Friday and Cyber Monday deals, check out our curated list on GitHub for JavaScript developers.

Have a deal you’d like to share? Drop it in the comments below — we’d love to hear about it!

Happy coding, and happy shopping! 🚀

As someone who has worked on several React projects, I know how essential a robust spreadsheet library can be for handling complex data entry and manipulation. Whether you’re developing internal tools, working on business apps, or creating dashboards, integrating an Excel-like experience into your React app can elevate its usability.

In this article, I’ll be comparing five popular React Spreadsheet libraries, broken down into three categories: open-source, paid, and hybrid options. Each library has its strengths, and my goal is to help you pick the best one based on your project’s unique needs.

Simplifying PDF Handling in React with React PDF Kit

Before we jump into spreadsheets, I wanted to mention something I’ve been working on that might be helpful if you’re dealing with PDFs in your React projects. React PDF is a library that makes it easy to render and customize PDFs right in your React app. It’s been great for projects that need more flexibility with documents — features like responsive layouts and theme customization really help when you’re working with PDF-heavy applications.

If PDFs are part of your app’s toolkit, React PDF might be worth a look.

Open-source libraries

Open-source spreadsheet libraries in React come with the powerful advantages associated with being open-source, such as cost savings, customization flexibility, and innovation potential. However, they come with their own set of disadvantages, like limited support, compatibility issues, and security risks if not properly managed. If your existing platform follows the open-source ecosystem, then you should consider adopting this option. Below are some of the options in this regard.

React-spreadsheet

Brief Overview
react-spreadsheet is a simple, customizable, yet performant spreadsheet component for React applications which focuses on common spreadsheet functionalities. It is easy to integrate and use in the React project.

Key Features
It includes the following basic spreadsheet features:

• Custom Row Labels
• Custom Column Labels
• Cell Editing
• Formula Support
• Custom Cell Rendering
• Filtering

Use Cases
The react-spreadsheet library can be used to develop interactive forms just like spreadsheets and speed up and simplify data entering. It is ideal for small-scale projects like tools based on simple CRUD operations or internal business tools such as simple inventory management systems.

Advanced Functionality
The react-spreadsheet library includes a default formula parser based on Fast Formula Parser, providing standard formulas and implementations. You can customize or override these formulas by passing a custom parser to the createFormulaParser prop or disabling specific functions.

ReactGrid

Brief Overview
ReactGrid is a react component which enables you to create tables with the look and feel of an Excel-like spreadsheet. ReactGrid was created to work with any data model independent of your schema. You can show data however you like because you can render anything in any cell.

Key Features
The basic feature focuses more on creating the appearance and behaviour of Excel-like typical spreadsheets:

• Column Resizing
• Column and Row reordering
• Focusing Cell
• Cell Templates
• Selections
• Fill Handle
• Data Change Handler — Useful for user actions like copy-pasting
• Touch Devices Support

Use Cases
ReactGrid can be used for the Data Entry Forms where it is required to add and validate data efficiently. Moreover, it can be used for basic reporting tools such as financial reporting where it is required to handle calculations in real time.

Advanced Functionality
ReactGrid provides you with a custom cell templating feature through which you can create your own cell templates and define your own style, validation and formatting. Just like built-in cell types you can use that cell type to have an appearance and behaviour of your choice.

Paid libraries

If the limitations of open-source spreadsheet libraries are a concern for you, then your next best option is paid libraries. They usually have more features and support ticketing to help with your issues. If you prefer advanced features, optimized performance, and effective customer support over cost, then you should try the paid libraries. Let’s go through some of the libraries in this category.

Handsontable

Brief Overview
Handsontable is basically a paid javascript library available for popular frameworks (React, Angular or Vue) and used to develop web apps with Excel-like spreadsheets containing large datasets. It is capable of modifying and extending with the custom plugins and provides advanced features for filtering, data validation and binding with the different data sources.

Key Features
Some basic features include:

• Easy data-binding
• Conditional formatting
• Dropdown menu
• Export to file
• Comments
• Copy to clipboard
• Auto fill
• Filtering data

Use Cases
Handsontable can be easily integrated into existing advanced systems for any specific functionality or it can be used to build full-fledged Excel-like applications with an extensive set of features. For example, it can be used to build applications having a dashboard with a bunch of charts and complex calculations. Another example is a project management tool that brings the scattered data from other sources to one platform and helps in simplifying the planning and scheduling complexities in project management.

Advanced Functionality
Handsontable provides many advanced features such as custom plugins on top of its basic functionality. Moreover, it also provides multiple-column sorting which allows users to apply sorting criteria to multiple columns at the same time.

Syncfusion

Brief Overview
Syncfusion is a platform that provides an extensive collection of UI components. One of those components is a React spreadsheet, which offers the functionality to organize and analyze data in tabular form with the look and feel of Excel spreadsheets. It allows you to load data into tables through local sources (importing Excel/CSV) or by binding remote data sources (JSON, RESTful services, OData services, and more).

Key Features
Some basic features include:

• Conditional formatting
• Protect Sheet
• Selection / Editing / Cell Formatting
• Export to file
• Globalization
• Charts / Pictures

Use Cases
Syncfusion spreadsheet is useful when your application needs to handle large datasets such as CRM, BI tools or allow multiple users to edit the same sheet in real-time like shared documentation. It is also useful when the UI is based on other components of Syncfusion to maintain consistency throughout the project.

Advanced Functionality
Syncfusion spreadsheets offer you the virtualization feature which is useful to handle large datasets as it allows you to load data when required instead of loading the whole data at once. Moreover, it also provides you with collaborative editing capability so multiple users can work simultaneously on the same sheet.

Hybrid Libraries

Hybrid libraries are kind of the best of both worlds. Not only you get the flexibility to start with a free basic set of features, but you can unlock advanced capabilities through a paid subscription down the road. This option is best if you want to start with a basic spreadsheet functionality (like an MVP) for cost savings, but expect scaling to more advanced features if you data analysis needs grow. Let’s explore some libraries in this category.

Jspreadsheet

Brief Overview
JSSpreadsheet is a lightweight JavaScript library which offers a variety of spreadsheet-like controls. It provides a set of Excel-like features that can be used to develop basic to advanced-level applications for data manipulation or analysis. The access to features varies based on the edition (Community/Pro) being used.

Key Features
Community Edition includes the following basic features:

• Spreadsheet-like formulas(Basic)
• Copy and paste features(Basic)
• Lazy loading(Basic)
• UI Customization(Basic)

Features offered in Pro version:

• All Features in CE but extended with advanced capability
• Plugins support
• Advanced filtering
• Worksheets management
• Automatic formula update on copy and paste
• Cell renderer

Use Cases
JSSpreadsheet is useful in a broad range of projects based on spreadsheets, from small ones to those offering an extensive set of features like Excel.

Advanced Functionality
JSSpreadsheet Pro offers cross-worksheet calculations, cell rendering, native validations, and premium extensions for complex and large-scale applications. It also provides the Formula Pro plugin which contains an extensive set of formulas expanding the toolset for Excel-like calculations.

Comparison of Spreadsheet Libraries

Conclusion

If your projects are relatively small with simple data entry needs, React-Spreadsheet or ReactGrid are the best options. On the other hand, if you require advanced features like financial modeling or large-scale data handling, Handsontable and Syncfusion offer robust solutions. Jspreadsheet strikes a good balance between flexibility and scalability, making it a strong choice for projects that may need to expand over time. Evaluate your project’s requirements and pick the library that fits best to streamline your development process.

React PDF Kit: Powerful, Flexible PDF Handling for React Apps

If this article was helpful, you might also enjoy exploring our React PDF Viewer component. Designed for seamless PDF management in React, it lets you customize layouts, apply themes, and handle PDFs effortlessly. With TypeScript support, built-in examples, and an intuitive setup, it’s easy to start enhancing your app with PDF functionality.

Thanks for reading, and I hope these tools make a difference in your projects! 🙏

For a while now, I have been using React at the company I work for, catering to consumer facing and back-office applications across industries. We deal a lot with forms of different level of complexities. To shorten form development time, our company recommends us to use React Hook Form library (a form library). I have always wondered if there are better alternatives but because of the nature of my work, I previously didn’t have the time to explore. So during the down time at the end of the year, I manage to find some time to look into different form libraries.

In this article, we will explore five popular form libraries for React.js projects: React Hook Form, Formik, Ant Design (AntD), TanStack, and React Final Form. Each of these libraries has its own unique features and capabilities, making them suitable for different types of projects and use cases.

Supercharge Your React App with React PDF Kit

Before we dive into form libraries, here’s a quick update on something I’m working on. React PDF Kit is a powerful library for rendering and customizing PDF documents directly in your React applications. With a wide range of features, including theme customization, localization, and responsive layouts, React PDF makes integrating PDFs a breeze.

If your project involves working with PDFs, whether for reports, documents, or dashboards, take a look at React PDF. It’s designed to make PDF handling fast and easy in any React setup.

Why are forms important?

Forms are an essential part of web applications, and React.js projects are no exception. They enable users to share information, complete tasks, and provide feedback. Without forms, many of the tasks that we take for granted on the web, such as logging in, signing up, or making purchases, would not be possible. Moreover, forms can manage component state and component reactivity very effectively by using the capabilities provided by various libraries. As such, learning how to create effective and user-friendly forms is essential for developers looking to build engaging and interactive web applications.

React Hook Form

React Hook Form (RHF) is easy to use and requires minimal boilerplate code from developers because it is built on top of the React hooks. A lightweight package with simple-to-use API that mainly focuses on performance and minimal re-renders. It can use both controlled (states) and uncontrolled inputs (refs) making RHF more flexible than other libraries.

Key Features

1. Easy Form Creation and Management
   You can simply create and manage the form using the RHF library. It will require very little coding and reduce the need for state management.
2. Built-in Validation Mechanism
   The React Hook form offers API options that follow the existing HTML standard for form validation, and you can create your own validation rules as well.

Using the RHF library, here is a development example of a basic form.

import { useCallback } from "react";  
 
import { useForm } from "react-hook-form";  
 
   
 
export const RHF = () => {  
 
  const {  
 
    register,  
 
    handleSubmit,  
 
    getValues,  
 
    formState: { errors },  
 
  } = useForm();  
 
   
 
  const onSubmit = useCallback(() => {  
 
    console.log(getValues());  
 
  }, [getValues]);  
 
   
 
  return (  
 
    <>  
 
      <h2>React Hook Formh2>  
 
      <form onSubmit={handleSubmit(onSubmit)}>  
 
        <label htmlFor="firstname">First namelabel>  
 
        <div>  
 
          <input  
 
            placeholder="First name"  
 
            {...register("firstname", { required: "this field is required" })}  
 
          />  
 
        div>  
 
        <div className="error-message">{errors.firstname?.message}div>  
 
        <label htmlFor="lastname">Last namelabel>  
 
        <div>  
 
          <input  
 
            placeholder="Last name"  
 
            {...register("lastname", { required: "this field is required" })}  
 
          />  
 
        div>  
 
        <div className="error-message">{errors.lastname?.message}div>  
 
        <button type="submit">Submitbutton>  
 
      form>  
 
      
 
  );  
 
};

Formik

Formik is an open-source tool built to increase the efficiency of managing form state, handling submissions and validating forms in React apps. For Example, traditionally, we handle forms in React by creating a useState() hook for each form field, adding event listeners and updating fields individually. Formik takes care of this by handling all that logic for us; we only need to import its components, giving us an easy way to access our form data. It is worth noting that although Formik was not maintained for the past two years, it has only recently been picked up again in late 2023.

Key Features

1. Easy Form Generation
   Form, Field, and ErrorMessage are just a few of the tools and components that come with Formik and offer a simple and recognizable method of configuring and controlling the form state.
2. Validation of Forms
   While there are numerous methods for utilizing Formik to validate the form, you can also utilize JavaScript functions or basic HTML input validation parameters like required and minlength.
3. Using Yup to Integrate Complex Validation Schemas
   Yup, a JavaScript schema builder that handles value parsing and validation can be integrated with Formik. This makes it possible to create complex validation rules and custom error messages, which improves the form validation process.

Here is a development example of a basic form using the Formik library.

import { Formik, Field, Form, ErrorMessage } from "formik";  
 
import * as Yup from "yup";  
 
   
 
const SignUpSchema = Yup.object().shape({  
 
  firstName: Yup.string().required("This field is required"),  
 
  lastName: Yup.string().required("This field is required"),  
 
});  
 
   
 
export const FormikForm = () => (  
 
  <div className="formik-form">  
 
    <h2>Formikh2>  
 
    <Formik  
 
      initialValues={{  
 
        email: "",  
 
        firstName: "",  
 
        lastName: "",  
 
      }}  
 
      validationSchema={SignUpSchema}  
 
      onSubmit={(values) => {  
 
        setTimeout(() => {  
 
          alert(JSON.stringify(values, null, 2));  
 
        }, 500);  
 
      }}  
 
      render={({ errors, touched }) => (  
 
        <Form>  
 
          <label htmlFor="firstName">First namelabel>  
 
          <div>  
 
            <Field name="firstName" placeholder="First name" type="text" />  
 
            <ErrorMessage  
 
              name="firstName"  
 
              component="div"  
 
              className="error-message"  
 
            />  
 
          div>  
 
   
 
          <label htmlFor="lastName">Last namelabel>  
 
          <div>  
 
            <Field name="lastName" placeholder="Last name" type="text" />  
 
            <ErrorMessage name="lastName">  
 
              {(msg) => <div className="error-message">{msg}div>}  
 
            ErrorMessage>  
 
          div>  
 
          <button type="submit">Submitbutton>  
 
        Form>  
 
      )}  
 
    />  
 
  div>  
 
);

Ant Design (AntD)

AntD is a UI framework that is the second most popular in the world because it provides high-quality React components, including a set of built-in typescript forms and validations. Unlike the other libraries mentioned in this article, AntD is a full UI library that offers a comprehensive suite of design elements along with forms and validations. It can support many different browsers, server-side rendering and electron environments. Unlike other UI libraries that would need additional plugins or extensions for some functionalities, AntD put all these key features into its core framework.

Key Features

1. Form Creation
   AntD provides a variety of data entry elements such as Input, Radio, Checkbox, etc, allowing different form designs.
2. Form Validation
   Maintains the integrity of data by applying comprehensive validation rules.
3. CSS-in-JS Technology
   It uses CSS-in-JS in its design to enable dynamic and mixed theme capabilities, hence allowing for more flexible style management.

Using the AntD library, here is a development example of a basic form.

import { Button, Form, Input, Flex } from "antd";  
 
   
 
export const Antd = () => {  
 
  const onFinish = (values) => {  
 
    console.log(values);  
 
  };  
 
   
 
  return (  
 
    <Flex vertical>  
 
      <h2>Ant Designh2>  
 
      <Form  
 
        name="normal_login"  
 
        initialValues={{ remember: true }}  
 
        onFinish={onFinish}  
 
      >  
 
        <Form.Item  
 
          name="firstname"  
 
          rules={[{ required: true, message: "This field is required" }]}  
 
        >  
 
          <Input placeholder="First name" />  
 
        Form.Item>  
 
        <Form.Item  
 
          name="lastname"  
 
          rules={[{ required: true, message: "This field is required" }]}  
 
        >  
 
          <Input placeholder="Lastname" />  
 
        Form.Item>  
 
   
 
        <Form.Item>  
 
          <Button  
 
            type="primary"  
 
            htmlType="submit"  
 
            className="login-form-button"  
 
          >  
 
            Submit  
 
          Button>  
 
        Form.Item>  
 
      Form>  
 
    Flex>  
 
  );  
 
};

TanStack

TanStack is not just a single library. It is actually a set of open-source libraries that are highly reliable. It has a variety of headless, type-safe, powerful utilities for web developers, such as state management, routing, data visualization, charts, tables, rather than focusing solely on UI components.

Key Features

1. Form Creation
   TanStack Forms makes it easy to create form layouts. The forms can have different types and structures of fields, and fields can also be added or removed dynamically within a form.
2. Form Validation
   TanStack Provides a set of predefined validation rules that can apply to the form fields so that it can generate data integrity. Also, it allows the implementation of custom validation logic, which permits the developer to define complex validation criteria.

Here is a development example of a basic form using the TanStack library.

import { useForm } from "@tanstack/react-form";  
 
   
 
function FieldInfo({ field }) {  
 
  return (  
 
    <>  
 
      {field.state.meta.touchedErrors ? (  
 
        <div className="error-message">{field.state.meta.touchedErrors}div>  
 
      ) : null}  
 
      {field.state.meta.isValidating ? "Validating..." : null}  
 
      
 
  );  
 
}  
 
   
 
export function TanStack() {  
 
  const form = useForm({  
 
    defaultValues: {  
 
      firstName: "",  
 
      lastName: "",  
 
    },  
 
    onSubmit: async ({ value }) => {  
 
      setTimeout(() => {  
 
        alert(JSON.stringify(value, null, 2));  
 
      }, 500);  
 
    },  
 
  });  
 
   
 
  return (  
 
    <div className="tanstack-form">  
 
      <h2>TanStackh2>  
 
      <form.Provider>  
 
        <form  
 
          onSubmit={(e) => {  
 
            e.preventDefault();  
 
            e.stopPropagation();  
 
            void form.handleSubmit();  
 
          }}  
 
        >  
 
          <div>  
 
            <form.Field  
 
              name="firstName"  
 
              validators={{  
 
                onChange: ({ value }) =>  
 
                  !value ? "This field is required" : undefined,  
 
              }}  
 
              children={(field) => {  
 
                return (  
 
                  <>  
 
                    <label htmlFor={field.name}>First namelabel>  
 
                    <div>  
 
                      <input  
 
                        id={field.name}  
 
                        name={field.name}  
 
                        value={field.state.value}  
 
                        onBlur={field.handleBlur}  
 
                        placeholder="First name"  
 
                        onChange={(e) => field.handleChange(e.target.value)}  
 
                      />  
 
                    div>  
 
                    <FieldInfo field={field} />  
 
                    
 
                );  
 
              }}  
 
            />  
 
          div>  
 
          <div>  
 
            <form.Field  
 
              name="lastName"  
 
              validators={{  
 
                onChange: ({ value }) =>  
 
                  !value ? "This field is required" : undefined,  
 
              }}  
 
              children={(field) => (  
 
                <>  
 
                  <label htmlFor={field.name}>Last namelabel>  
 
                  <div>  
 
                    <input  
 
                      id={field.name}  
 
                      name={field.name}  
 
                      value={field.state.value}  
 
                      onBlur={field.handleBlur}  
 
                      placeholder="Last name"  
 
                      onChange={(e) => field.handleChange(e.target.value)}  
 
                    />  
 
                  div>  
 
                  <FieldInfo field={field} />  
 
                  
 
              )}  
 
            />  
 
          div>  
 
          <form.Subscribe  
 
            selector={(state) => [state.canSubmit, state.isSubmitting]}  
 
            children={([canSubmit, isSubmitting]) => (  
 
              <button type="submit" disabled={!canSubmit}>  
 
                {isSubmitting ? "..." : "Submit"}  
 
              button>  
 
            )}  
 
          />  
 
        form>  
 
      Provider>  
 
    

); }

React Final Form

React Final Form provides a straightforward way to handle form state and validation with minimal impact on performance. It is a wrapper around Final Form with no dependencies. It follows an observer design pattern in which components subscribe to specific events that cause fewer re-renders instead of re-rendering the whole form. It is similar to the useEffect() hook in React that watches the values. React Final Form is wired up to provide validation, state management, and event handling with minimal configuration.

Key Features

1. Form Validation
   React Final Form supports a variety of validation methods along with the custom validation engine. At a high level, it provides two types of validations:
   Field-Level Validation: This validation runs when any field in the form changes.
   Form-Level Validation: This validation runs when the form is submitted.
2. Form Creation
   You can easily set up React Final Form by using and components, and it also provides built-in input types, dynamic fields, wizard forms, custom component creation and integration with other UI Libraries.
3. Efficient Data Management
   The Library also loads, normalizes, saves, and reinitializes form data to maintain the pristine/dirty state and manage complicated form workflows.

Here is a development example of a basic form using the React Final Form library.

import React from "react";  
 
import { Form, Field } from "react-final-form";  
 
  
 
const onSubmit = async (values) => {  
 
  console.log(values);  
 
};  
 
  
 
export const ReactFinalForm = () => (  
 
  <div className="react-final-form">  
   
    <h2>React Final Formh2>  
   
    <Form  
     
    onSubmit={onSubmit}  
     
    validate={(values) => {  
     
      const errors = {};  
       
      console.log(values);  
       
      if (!values.firstname) {  
       
        errors.firstname = "This field is required";  
       
      }  
       
      if (!values.lastname) {  
       
        errors.lastname = "This field is required";  
       
      }  
       
      return errors;  
     
    }}  
     
    render={({ submitError, handleSubmit, submitting }) => (  
     
      <form onSubmit={handleSubmit}>  
       
        <Field name="firstname">  
         
        {({ input, meta }) => (  
         
          <div>  
           
            <label htmlFor="firstname">First namelabel>  
           
            <div>  
             
              <input {...input} type="text" placeholder="First name" />  
               
            div>  
           
            <div className="error-message">  
             
              {meta.touched ? meta.error || meta.submitError : ""}  
             
            div>  
           
          div>  
         
        )}  
         
        Field>  
       
        <Field name="lastname">  
         
        {({ input, meta }) => (  
         
          <div>  
           
            <label htmlFor="lastname">Last namelabel>  
           
            <div>  
             
              <input {...input} placeholder="Last name" />  
             
            div>  
           
            <div className="error-message">  
             
              {meta.touched ? meta.error || meta.submitError : ""}  
             
            div>  
           
          div>  
         
        )}  
         
        Field>  
       
      {submitError && <div className="error">{submitError}div>}  
       
        <div className="buttons">  
         
          <button type="submit" disabled={submitting}>  
           
          Submit  
           
          button>  
         
        div>  
       
      form>  
     
    )}  
   
  />  
   
  div>  
 
);

Comparing the five libraries

Conclusion

Choosing the right library depends on specific project needs, as highlighted in our analysis. Considering each library’s strengths can guide you to the best fit for your project. It is important to consider the strengths of each Library in the context of your project.

1. RHF — Choose RHF if you want to have good speed and simplicity with zero dependencies
2. Formik — Choose Formik if you want a tried and tested solution for form management with a large community and recent updates that have revitalized its maintenance
3. TanStack — Good option if you need a versatile toolkit for complex form systems and state management within a modular and powerful ecosystem
4. React Final Form — best fit for performance-centric projects that require lightweight forms with flexible validation and minimal dependencies.
5. AntD — Go for AntD if you’re seeking a comprehensive UI framework that includes a wide range of ready-made components, including robust form elements and validation, for cohesive interface development.

Personally, I will stick with RHF until something that offers significantly better performance and/or functionalities comes along. However, everyone’s situation is different, I hope you find my exploration a good starting point. For more information you can start digging further them via the official documentation, which would help you understand which is best for which situation. Such research will enable you to save time and streamline your form development process.

Make PDF Handling Effortless with React PDF Kit

If you found this article helpful for your forms, don’t miss another must-have for your React toolkit: React PDF Kit. Whether you’re building a dashboard or managing documents, React PDF allows you to easily display and customize PDFs without the hassle. It’s fast, developer-friendly, and built to handle complex PDF needs, all while staying flexible and light.

Check it out and see how it can simplify PDF handling in your next project!