What is it ?

wkEdit — A low level, WYSIWYG, and native HTML editor based on the WebKit

wkEdit is a simple text editor, similar in functionality to TextEdit… but, instead of working on files in .txt or .rtf(d) format, it uses .html and .webarchive formats.

Unlike TextEdit, it allows fine-tuning of the document as it brings the power of the techniques used on the web into a local document... change the margin, just adding “margin: 1in” into the stylesheet, for example.

wkEdit works best for single bloc documents : one page, one screen, etc. It does not aim to replace word processors !

What’s new ?

The originality of this editor is that it allows direct editing of the rendering AND editing of the source code, while preserving the caret location when switching from one mode to the other.

Switching to the source code edition also automatically cleans its syntax using the HTML Tidy library… documentation is available and default parameters are provided.

Version 1.3 is a maintenance update for Tahoe. It brings back the ability to open the created .webarchive files, in external application (mainly Safari).
This version uses the new Tahoe liquid glass icons.

Version 1.2 is a maintenance update for Ventura. It also updates the “Size” menu items, to include the new iPhone and iPad models.
This version also now uses the Tidy library 5.8.0.

Version 1.1 is a maintenance update for Big Sur. This version also runs natively on Apple Silicon devices.

wkEdit 1.0 is the first public version.

How does it work ?

Direct preview editing

Like TextEdit, enter some text, change its attributes (using the menus, the Font and Colors panels), add some graphical elements (by copy and paste, or by drag and drop).

Dropping or pasting an image

Dropping an image file into the editor will insert this image in the document, as expected.

Technically speaking, this image file is inserted as a reference to this file.

⚠️ Pasting an image into the document will also create a file reference... while saving the document as a webarchive will preserve this reference, saving it as html will lose it. This is like, in TextEdit, saving a document with an image as a plain text document (it loses the image also).

Source editing

wkEdit goes further, as you can fine-tune the rendering, accessing directly to the source code of the HTML document. A simple clic on this icon in the toolbar (or pressing command-Y) will toggle between the 2 modes.

Using the Inspector

You can also use the WebKit Web Inspector (using the contextual menu) to edit the source code of the document transparently.

Drop file content

Dropping an image file into the source code will also insert this image in the document, as expected.

Technically speaking, this image file is now inserted as a ”data:” URL.

Dropping a text file (some HTML code, or an SVG image) into the source code will insert the raw content of this file.

Window size

The window size is used to create the copied .pdf file, at the actual zoom level… as an html document, by default, flows into the entire available space. A few default sizes are provided in the menus.

Other sizes can be added to the “Size to…” menu, by just adding them into the “otherSizesMenuConfig” configuration file.

Holding down the option key (also known as the alternate key), the size will be used in landscape mode instead of portrait mode.

⚠️ The effective size of the window is used when copying to PDF and printing the document! Make sure it matches your needs.

Practical uses

Create PDFs items

wkEdit allows copying the currently visible portion as PDF, making it the easiest way to create a simple PDF element.

Edit webarchives

Documents can be saved as files or as webarchives (which could be an easy way to embed all required resources in a single document).

wkEdit can also open (and modify) most external webarchive files (as created by Safari, for example).

Look websites source code

It is also possible to open remote URLs directly (for example, to examine their constructional elements).

By default, wkEdit will not follow links, to avoid an unwanted page change... but, by holding down the alternate key while requesting a link, the link will be followed and the page will be replaced by the page of the link.

Use external fonts

wkEdit allows usage of fonts that are not installed on your computer (a.o. Google Fonts).

Use images with .svg format

Dropped images can be any classical format, but also .svg files -- making wkEdit an easy way to convert an .svg file into a .pdf file.

1. Create a new document._
2. Drag a .svg file from the Finder into this document.
3. Adjust the window to the wanted size.
4. Copy as PDF to bring the .pdf file into the clipboard.

If wanted, this file can be opened in Preview, using ”New from Clipboard…” command or pasted directly in any application (like Pages, for example).

Frequently asked questions

Unexpected DOM item

When using the WebKit file inspector, I see a strange temporary DOM item <span id="_!_"></span> , what is it ?

This item is used to find back the cursor location when toggling between the 2 edition modes. It is a temporary node, and can be ignored (or deleted).