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.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 document will insert a reference to this file.

Pasting an image into the document will transparently create a dummy 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.

Drop file content

Dropping an image file into the source code will insert the content of this file as a ”data:” URL.

Dropping a text file into the source code will insert the 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.

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).