Web Tools #357 - Screenshot/PDF API, React Tools, Media, Site Builders

The following intro is a paid product review for Restpack, a web service for generating screenshots and converting HTML to PDF, both via API calls.

You might have a number of different reasons for automating or programmatically generating screenshots or PDFs in one of your web apps. You may want to generate reports or invoices, or maybe you need to produce dynamic website screenshots via Node, PHP, Python, Ruby, Go, or C#.

Restpack offers two API services:
 

• Screenshot API
• HTML to PDF API

Each API is available using any of the aforementioned technologies, and both services are very easy to use. The rendering engine that these APIs are based on is WebKit and the results are extremely accurate, rendering web fonts, CSS, and dynamic JavaScript-based content with pixel-perfect precision.

Let's first consider the Screenshot API. When you create an account (they offer a 7-day free trial), you can access either service via the Restpack console. You can try out the screenshot API in just a few clicks using the API Explorer, which is pretty cool because it's basically a GUI for testing requests:

As you can see, the service provides you with your own access token (I've disguised mine) that you can use to make an API request using one of the technologies (Node is selected in the screenshot). There's also the ability to add various parameters to the API call, some of which you can see in the bottom-right area of the above screenshot.

It's easy to execute an API call via your terminal using the example Curl command. Here's one that I used to take a screenshot of the Web Tools Weekly home page (again, my access token is removed):
 

You can see the result of that request at this URL, which is produced automatically by Restpack when the request is successful. The result is stored via CDN and is publicly available.

The above code executed a POST request, but I could also execute the same command using a GET request via the following URL:

https://restpack.io/api/screenshot/v6/capture

I would just have to provide any necessary parameters (access_token, json, url, format, width, etc.) by attaching them to the URL as query string values.

Let's now take a look at the HTML to PDF API, which similarly provides an API Explorer along with a whole slew of parameters you can add to the request to customize the look of the PDF.

One really cool feature is the ability to add CSS to the request to style certain parts of the page (for example, you can send a print stylesheet). I used the service to generate a PDF of one of my lengthy articles on JSON. I added some custom CSS to hide the sidebar, most of the footer, and other areas of the page. You can see the resulting PDF at this location., with all article links intact. You can see how a little CSS wrangling can get you a nicely laid out PDF from any web page.

Both APIs return the raw document by default, but you can specify a JSON parameter to receive a JSON object instead. For example, my request to create the article PDF had the following JSON response:
 

Once you have this data, you can deal with it as needed. Very useful!

As with the screenshot API, the HTML to PDF API allows you to make either POST or GET requests, with more than two dozen optional parameters you can pass to customize the response.

As mentioned, you can give Restpack a try with their 7-day trial for either service, after which you can choose from a variety of reasonable pricing options.

Now on to this week's tools!
 

React Tools

Recoil
An experimental state management library for React apps that provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

react-circular-input
React components for easily composing a circular range input (i.e. a circular progress indicator).

react-hotkeys-hook
A React hook for using keyboard shortcuts in components.

Kea
Now at version 2+. Production-ready state management for React.

React-Tiny-Link
Convert your links into beautiful previews. A React link preview component with cards for web without a specific backend.

react-select-search
Lightweight select component for React.

React Cool Inview
React hook to monitor when an element enters or leaves the viewport (or when it enters or leaves another element).

useWorker
A React hook that can run expensive background tasks that are non-blocking, with Promises support.

react-pdf-highlighter
A React library built on top of Mozilla's PDF.js that provides annotations for PDF documents on web.

Snuggle
Lightweight React component to create CSS-based masonry-like layouts (i.e. layouts that "snuggle" the elements together tightly).

react-tater
A React component to add annotations to any element on a page.

use-local-storage-state
React hook that persists data in local storage.

React Autosuggest
WAI-ARIA compliant, mobile-friendly, and customizable autosuggest component for React.

Media Tools (SVG, Audio, Video, etc.)

React PIXI
React version of PixiJS, the 2D rendering library for building interactive graphics and games.

Control
100+ illustrations that can be customized via an online constructor to create the specific scene you're looking for.

Draw.io VS Code Integration
Integrates Draw.io (now called diagrams.net), the online drawing tool, into VS Code.

Canvas-Txt
Library to easily render text onto HTML Canvas. The page has a neat little interactive demo to try it out.

Thumbs Up
Upload a YouTube thumbnail and enter your video's title and this tool will show you what it will look like on YouTube in its various formats.

Scrawl-canvas
A JavaScript library for working with the HTML Canvas element, helping to make the Canvas elements responsive, accessible, interactive, and more.

React Leaflet
React components for Leaflet maps (the open-source library for mobile-friendly interactive maps).

midori
Library for animated image backgrounds. Features include a configurable dynamic camera, transitions between backgrounds, and effects.

Podely
Service that converts your YouTube channel into a podcast.

GoJS
JavaScript and TypeScript library for building interactive diagrams and graphs, from simple flowcharts and org charts to highly-specific industrial diagrams, and more.

PIXI.js Playground
A series of examples (forkable and free to use) demonstrating how you can use PixiJS to create interactive experiences.

Peaks.js
JavaScript UI component for interacting with audio waveforms.

Rough Charts
A responsive, composable React charting library with a hand-drawn style.

Static Sites, CMS's, Site Builders, etc.

beluga
Open-source software for creating your own ecommerce site. Built with React and Node, and using Stripe for payment processing.

gatsby-starter-ts
A TypeScript starter template for Gatsby. No plugins or styling, just a bare starting point.

TS LiveView
Enables rich, real-time user experiences with server-rendered HTML. Just like Phoenix LiveView (the Elixir-based framework) but in Typescript.

Ga11ery
A minimal image sharing site kit, built with Eleventy and NetlifyCMS. Ideal for photography, illustration, and web comics.

Eleventy Error Overlay
A pretty error page for development-time Eleventy build problems, to catch errors before going to production.

Adalo
Build database-driven, interactive apps using a drag-and-drop interface with no code.

gatsby-remark-embedder
Gatsby Remark plugin to embed well known services by their URL. For example, CodePen, CodeSandbox, Pinterest, SoundCloud, Twitch, Twitter, etc., can all be embedded via the URL alone, no embed code needed.

Tilda
Create beautiful websites without any code. 450+ pre-designed blocks ready for your web projects.

Slaptrash
Make weird Flash-like text/audio presentations by writing markup. The examples are just plain weird, but it's an interesting little experiment.

A Tweet for Thought

I hope your development experience doesn't feel like this very often.
 

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

If you're a bit of a word nerd like me, you might enjoy This Word Does Not Exist (another addition to the 'X does not exist' AI/ML trend) that uses machine learning to make up words and their definitions.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly