Building blocks and outside APIs

TipTap is built on ProseMirror, a well-tested editing engine, and wraps it in a friendlier API for React, Vue and plain JavaScript, with guides for other frameworks. It is headless: there is no built-in toolbar or styling, so the editor looks like the rest of your app. Each feature (headings, tables, mentions, slash commands, code blocks) is an extension you add or write, and documents are saved as structured JSON or as HTML.

Rich text editing is notoriously hard to build from scratch (selection, undo, pasting from Word, mobile keyboards), and that is the work TipTap takes on. Real-time collaboration, with several people editing one document and seeing each other's cursors, runs on Yjs: you can host the open-source Hocuspocus server yourself or pay for the Tiptap Platform, which adds comments, version history, document conversion and AI editing tools.

CodeMirror 6 is built from small modules: language support, themes, linting, autocompletion and key bindings are all extensions you add. Highlighting uses Lezer, an incremental parser that re-reads only what changed, so large files stay responsive, and the editor was designed with touch screens and screen readers in mind. Its author, Marijn Haverbeke, also created ProseMirror, the engine under TipTap.

The main alternative is Monaco, the editor from VS Code, which brings more IDE features out of the box but is heavier and does not support mobile browsers. CodeMirror suits code playgrounds, SQL consoles, config editors, Markdown source editing and in-app scripting. It edits plain text; for formatted documents with bold and images, a rich text toolkit such as TipTap fits instead.

A chart is written as JSX: a LineChart containing an XAxis, a YAxis, a Tooltip, a Legend and one Line per series, fed an array of objects. It renders SVG, so charts stay sharp at any size, take CSS styling and resize with ResponsiveContainer. It borrows parts of D3 for the maths without making you learn D3, and the chart components in shadcn/ui are built on it.

SVG means one page element per point, bar or label, so charts slow down with many thousands of points or rapid live updates; Canvas-based libraries such as uPlot cope better there. For typical dashboards, reports and admin screens it is a comfortable default.

uPlot draws with the Canvas 2D API instead of creating SVG elements, and the whole library is about 50 KB minified. That keeps large data sets and live streams responsive, with smooth zooming and hover readouts. It supports multiple series and y-axes, time zones, bands, stacked areas, cursors synced across several charts, and plugins through hooks.

It is deliberately minimal: no animations, no data processing, and a lower-level API built on an options object. It is framework-agnostic, with small community wrappers for React, Vue and Svelte. It suits monitoring dashboards, sensor and trading charts and analytics views where an SVG library would bog down; for pie charts and decorative visuals, other libraries are friendlier.

Vico draws with the platform's own graphics rather than a web view, so charts scroll, animate and follow the app's theme, including Material 3 colours. It covers Cartesian charts (line, column and candlestick layers, which can be combined in one chart) and pie charts, with axes, markers that show values on touch, zooming and scrolling through long series.

It began as an Android library with separate modules for Compose and classic views, and now also targets Compose Multiplatform, so the same chart code can run on iOS, desktop and the web. It is the native counterpart to web libraries such as Recharts, suited to fitness, finance and usage screens in mobile apps.

You give React Flow a list of nodes (with positions) and edges (which node links to which), and it renders an interactive canvas with dragging, zooming, panning, selection, a minimap and controls. Each node is an ordinary React component, so it can hold forms, charts or buttons, and handles mark where connections may start and end. It is made by xyflow, which also publishes Svelte Flow.

Common uses are automation and workflow builders, AI agent editors, data pipelines, mind maps and org charts. It does not arrange nodes by itself; layout libraries such as dagre or ELK calculate positions. Very large graphs with rich nodes need care (simple node components, memoisation) to stay smooth.

cmdk supplies the behaviour and leaves the looks to you: an input, a list of items and groups, filtering and ranking as the user types, arrow-key navigation and the roles screen readers need. It renders inline or inside a dialog (built on Radix UI's Dialog), can double as an accessible combobox, and each item can run any function, such as opening a page, switching the theme or creating a record.

It is the engine behind the Command component in shadcn/ui, so many React apps use it without knowing. Command menus speed up large apps for regular users, but they add to navigation rather than replace it, because newcomers rarely know the shortcut exists.

You place one Toaster component near the root of the app and call toast('Saved') from anywhere, even outside React components. It has success, error, loading and custom toasts, action buttons such as Undo, and toast.promise, which shows a loading message that turns into success or failure when a request settles. Toasts stack neatly and can be swiped away.

shadcn/ui adopted Sonner as its recommended toast component, which made it a common choice in Tailwind-based React apps. Toasts suit brief, non-critical feedback. Errors that need a decision, or anything users must not miss, belong in the page or a dialog, and toasts that matter should stay long enough to read and be announced to screen readers.

Pyodide is CPython compiled to WebAssembly with Emscripten. A page loads it from a CDN or your own server and then runs Python code, and Python and JavaScript can call each other and pass objects back and forth. Pure-Python packages install from PyPI with micropip, and many packages with compiled parts (NumPy, pandas, SciPy, Matplotlib, scikit-learn) are pre-built for it. It also runs in Node.js and in web workers, which keeps long jobs from freezing the page.

It powers JupyterLite notebooks, PyScript, and many teaching sites and code playgrounds, where running code on the visitor's own machine avoids maintaining a server-side sandbox. The costs are a download of several megabytes before the first line runs, slower execution than native Python, and limited support for threads and network sockets.

Users sign in with Google through OAuth and grant a scope that decides how much of their Drive the app can reach. The narrow drive.file scope covers only files the app created or the user chose (for example in the Google Picker) and keeps Google's app review light; apps asking to read a user's whole Drive must pass a stricter verification, which can include a security assessment. A hidden appDataFolder gives an app private space for settings or backups.

The REST API covers resumable uploads of large files, folders, sharing permissions, search, change notifications, and exporting Google Docs, Sheets and Slides to formats such as PDF and DOCX. Calls are free within per-minute quotas measured in quota units, and Google has announced that usage above a daily threshold will be billed once it has given 90 days' notice.

octokit.js bundles clients for GitHub's REST and GraphQL APIs with helpers for pagination, webhooks, retries, throttling and signing in as a user, an OAuth app or a GitHub App. It runs in Node.js, browsers and Deno, and there are official Octokit libraries for .NET and Ruby as well. Typical uses are bots that label issues, pull request dashboards, tools that commit files, and scripts in GitHub Actions.

The library is free; the limits are GitHub's. Unauthenticated REST calls get 60 requests an hour per IP address, a signed-in user or token gets 5,000 an hour, and GitHub App installations scale with their number of repositories and users (up to 12,500 an hour). Secondary limits also cap bursts and concurrent requests, so heavy tools should cache, use conditional requests and back off when GitHub says so.

After registering for a key, you query endpoints for search, details, credits, images, videos (trailer links, mostly on YouTube), recommendations, trending lists and where-to-watch providers by country. Images are served from TMDB's CDN in several sizes, so an app can load small posters in lists and large ones on detail pages. The data is edited by a large community in dozens of languages and changes often, so cache it but refresh it.

It is free for non-commercial use as long as the app credits TMDB with an approved logo and the notice 'This product uses the TMDB API but is not endorsed or certified by TMDB.' A project whose main purpose is earning money needs a commercial licence, arranged through TMDB's sales team. Watch-provider data comes from JustWatch and must be credited to JustWatch too. There is no uptime promise, and heavy traffic is throttled at around 40 requests a second.

Every request goes to a single GraphQL endpoint, and each query names exactly the fields it needs, such as titles in several languages, cover images, episode counts, airing schedules and scores. Public data needs no key, while reading or changing a user's own lists requires OAuth sign-in. Entries carry an isAdult flag, which matters for apps listed in the App Store or Google Play.

The normal rate limit is 90 requests a minute plus a burst limit, and it can be lowered temporarily when the service is under strain. The terms allow non-commercial use and commercial apps earning under $150 a month without asking; above that a commercial licence is needed. Mass collection of data, using the API as storage and building a competing list tracker are not allowed, and apps with AniList in their name must mark themselves as unofficial.

Calendly connects to Google, Outlook or iCloud calendars, checks for conflicts and shows only open times, in the visitor's own time zone. Event types set the length, buffers, questions to ask and the video link (Zoom, Google Meet or Microsoft Teams). A booking page can be embedded on a website inline, as a pop-up widget or as a pop-up text link, and on paid plans it can take payment through Stripe or PayPal before a meeting is confirmed.

The API works on every plan, for listing events and invitees or creating single-use booking links; webhooks that tell your server when someone books or cancels need a paid plan. Round-robin scheduling, lead routing and Salesforce sync sit in the Teams tier. Cal.com is an open-source alternative that can be self-hosted.