Drafts Web Capture

Table of Contents

1. What is Drafts Web Capture?
2. Intro Screencast
3. What Drafts Web Capture is NOT
4. Using Drafts Web Capture
   1. Location
5. Supported Query Arguments
6. Bookmarklets
   1. Markdown Format Bookmarklet Examples
   2. Plain Text Format Bookmarklet Example
7. Modifying Bookmarklets
8. How Drafts Web Capture Works

What is Drafts Web Capture?

Drafts Web Capture is a web page that integrates directly with your Drafts iCloud storage, allowing the creation of drafts from any web browser on any platform. Key use cases for Drafts Web Capture:

• You are someplace you do not have access to the Drafts app directly. On a Windows PC at work? Have an Android tablet? Now you can capture that idea directly to Drafts without pulling out your iPhone.
• You want to use Drafts as a bookmark library, read-it-later service, or general research tool to keep up with links and text quotes from web pages. Combined with a bookmarklet (examples below), Draft Web Capture makes it smooth and easy to enable such workflows.

Drafts Web Capture should work in most modern browsers (Safari, Chrome, Firefox) on any platform (Windows, Linux, Android - as well as macOS, iOS).

Intro Screencast

What Drafts Web Capture is NOT

This tool is only designed to allow quick capture into your Drafts library. It does not have any facilities to review, edit, or otherwise manage your drafts.

Using Drafts Web Capture

iCloud Sync Required

Web Capture works directly with your iCloud storage, thus you must be using iCloud Sync with Drafts for this tool to work. If you are running Drafts as a standalone local install with sync disabled, drafts created with it will not appear in the app.

To use Drafts Web Capture:

• Visit capture.getdrafts.com in your browser.
• Use the “Sign in with Apple ID” button to log in with the same Apple ID you use for iCloud.
• Enter the content desired in the form, including any tags you wish to assign.
• Click the “Create Draft” button.

If you receive a confirmation, the draft has been successfully created in your iCloud account, and will sync to your installations of Drafts on iPhone, iPad, or Mac the next time they update.

Location

If you wish to capture location information with your drafts, enable the “Use Location” checkbox. You will be prompted to allow location for the site, and if allowed your location information will be stored with created drafts. If you do not care about location information, you may wish to leave this preference disabled or you will periodically have to re-allow location permissions to the web page.

Supported Query Arguments

The capture page supports pre-loading the initial content from the query args of the URL. These are the ?key=value arguments at the end of the URL. Using these arguments, bookmarklets or other automation tools can open the page with the text, tags, and flagged status pre-set.

The following query arguments are available to control the initial state and behavior of the capture form:

• text: Initial text to set in the ‘content’ field.
• tags: Comma-separated list of tags to place in the ‘tags’ field.
• flagged: 0 or 1. If 1, the “flagged” checkbox will be enabled.
• url: Source url. Generally used by bookmarklet to pass source URL to redirect after saving a draft.
• redirect: url or back. If url, and the url argument is provided, after successfully creating a draft, redirect to the url. If back, the browser will navigate back in the history (like tapping browser’s back button).

As an example, if you always want to tag drafts captured through Drafts Web Capture with the tag “web”, you could set up a bookmark using the URL below, and the page will open with “web” already in the tags field:

https://capture.getdrafts.com/?tags=web

Bookmarklets

Bookmarklets are browser bookmarks that run simple JavaScripts. We have made example bookmarklets that open the capture site with the text pre-filled with the title, url, and text selection from the web page you are currently browsing in both Markdown and plain text formats.

Markdown Format Bookmarklet Examples

The Markdown bookmarklet examples open capture with information from the current page in Markdown format, similar to the below template:

[Page Title](Page URL)

> Selected text

On the Desktop:

Drag to below to your bookmarks:

• Same Page: Drafts Capture << Drag to your bookmarks
  • This version will redirect to Drafts Capture in the same tab you are currently on, returning to current page after capture.
• Popup: Drafts Capture << Drag to your bookmarks
  • This version will open Drafts Capture in a separate popup window.

On iOS:

iOS makes it somewhat difficult to add bookmarklets. Follow these instructions to get a ‘Drafts Capture’ bookmarklet working on your iOS devices:

• Add this page as a bookmark (click on the box with the arrow in it next to the Safari address bar).
• Click the open book icon, select ‘edit’, and rename the bookmark to something like ‘Drafts Capture’
• Same page version, select the text below:

• Popup version, select the text below:

• Edit the bookmark you just made and the text you copied into the URL field.

Plain Text Format Bookmarklet Example

The Plain Text bookmarket examples open capture with information from the current page in without markup, similar to the below template:

Page Title
Page URL

Selected text

On the Desktop:

Drag to below to your bookmarks:

• Same Page: Drafts Capture << Drag to your bookmarks
  • This version will redirect to Drafts Capture in the same tab you are currently on, returning to current page after capture.

On iOS:

iOS makes it somewhat difficult to add bookmarklets. Follow these instructions to get a ‘Drafts Capture’ bookmarklet working on your iOS devices:

• Add this page as a bookmark (click on the box with the arrow in it next to the Safari address bar).
• Click the open book icon, select ‘edit’, and rename the bookmark to something like ‘Drafts Capture’
• Select the text below:

• Edit the bookmark you just made and the text you copied into the URL field.

Modifying Bookmarklets

You may wish to customize your bookmarklets to capture different information or format it differently. In its simplest form, a bookmarklet should gather information from the current page, and pass it to the Drafts Web Capture site by redirecting to its URL with the desired data passed in query arguments.

Bookmarklets are not easy to author due to the required encoding to store the JavaScript. If you want to modify how the template output for the example bookmarklet is generated, or include other information, I recommend you use a generator. There are a number online, we like Bookmarklet Maker. The raw JavaScript used to generate the Markdown example bookmarklet is below, and can be pasted in to a generator as a starting point.

s=document.getSelection();
if (s && s != "") {	
	s=`

> ${s}`;
}
t=`[${document.title}](${location.href})`;
u=`https://capture.getdrafts.com/?redirect=back&url=${encodeURIComponent(location.href)}&text=${encodeURIComponent(t)}${encodeURIComponent(s)}`
document.location=u;

How Drafts Web Capture Works

Drafts Web Capture uses Apple’s CloudKit JS to communicate directly with Apple’s iCloud servers to create drafts in your Drafts private datastore.

The tool operates client-side in your browser, communicating only with Apple’s iCloud servers over secure connections. It does not pass through any of our servers, including for authentication purposes, nor does the tool rely on a local installation of Drafts - and thus can operate in any compatible browser on any platform.

Once the tool successfully creates drafts, they will sync automatically with your installations of the app on iOS and Mac.