Canvas control: zoom level, current device and device switching, canvas grid.


Add a new element to the canvas; the Add icon opens a popup with additional elements.


Open the site settings, preview control and publishing control.

Since the Sparkle toolbar is fully customizable, like most macOS applications, the above are just the defaults. You can right click or control click to customize the contents.


The Pages/Layers control lets you switch between the list of page thumbnails and the list of layers for the current page.

You can turn thumbnails on and off from the View menu, and the sidebar can be resized to show larger thumbnails or more title text.

The layers panel contains a list of elements and groups in the page, including popups. Selecting a layer or popup in the layer list selects the corresponding element in the canvas, and viceversa.

You can edit a layer name directly in the layers panel or from the arrange inspector. Naming layers mostly has a documentation purpose, it doesn’t affect the generated code in any way. The popup layer name is shown in the user interface as the popup name, making it more useful than for other elements.

Layers are a great way to access elements underneath the current element, or to control how elements that move relative to others during scrolling will stack. An example of this is stick to top groups, which many elements on the page will overlap at some point, or elements with scroll animation.


Sparkle’s format bar, for quick access commands that are commonly used or useful to have near the canvas and canvas elements.

The Sparkle format bar

The first button from the left is equivalent to the “Show hidden elements” option in the View menu, and is related to multi-device websites.

The second button helps control popups. The third controls blog posts, and is only visible on blog pages.

The following buttons are enabled when two or more elements are selected, and are equivalent to menu items in the Arrange menu:


The inspector heading lets you pick which group of settings to display. The Style and Arrange panes always refer to the currently selected element. The Style pane contains most of the element-specific settings such as its visual aspect and behavior, whereas the Arrange pane contains mainly position and size settings. The Page pane contains settings for the current page.


The page outline will show all of the pages in your document, with the option of organizing pages in sections. From here you can rename and reorder pages and sections.

The outline thumbnails are a simplified representation of the page contents. For example they don’t show the content of very long pages, the different page alignments, menu drop downs or animations, but they’re useful for context.


The inspector immediately reflects settings for the currently selected item. Conversely, changing a setting immediately reflects the change in the canvas and in any open preview. Each element type has its own settings, which are explained in other parts of this documentation.


In the context of the page outline, these buttons let you add, duplicate and delete pages and sections.


The currently selected page is shown in the canvas. Sparkle is a WYSIWYG application (“What You See Is What You Get”), meaning you operate on the elements by selecting, moving and resizing them interactively as you do in most modern visual applications.

The canvas can be zoomed from 25% to 400% using the toolbar zoom menu, the most common (and default) zoom behavior is to automatically fit the document width, which lets you freely resize the document window.

While scrolling around the page is easy enough, particularly with scrolling gestures on modern mice and trackpads, when the page is zoomed in a lot you risk overshooting the target location. An alternative, more precise way of navigating around the page, which works when you aren’t editing a text block, is to hold down the spacebar, grab the canvas and move it around.

By default Sparkle shows a number of overlay boxes, lines and guides to help identify and align elements. You can turn them off and on by pressing tab to get an in-canvas look closer to the final result, a way to quickly unclutter the view.

Touch Bar

On Touch Bar equipped MacBook Pros you can access the most frequent commands for each selected element in the Touch Bar strip directly.

Page bottom

Finally the page bottom element, within the canvas, lets you make the page shorter or taller. While the page is generally clipped where content ends, the page bottom is useful in conjunction with elements that follow the page footer (see the Arrange inspector page). A double click on the page bottom will move it up to bump against the last element on the page.

Sparkle and the macOS document model

Sparkle adheres to the modern macOS document model, so documents are autosaved in the background and versioned by the system. You can open multiple files as tabs of the same window.

Sharing Sparkle files

Sharing Sparkle website files is safe and secure, we have painstakingly engineered this aspect to ensure sharing flexibility and security. Specifically:

  • your web publishing settings are saved in the system keychain, they can’t be extracted from the Sparkle file;
  • you can move a Sparkle file to a different Mac freely, if it’s your own Mac the keychain settings can be synchronized via iCloud keychain and it will work right away, if it’s someone else’s they can enter the publishing settings again (if needed) and both settings will be retained when moving the file back and forth;
  • likewise export to disk settings are only visible on the machine where the application is set up, but multiple disk setups are possible and preserved when moving the document back and forth between different Macs.
The Sparkle page bottom control

Updated for Sparkle 3.1

Auf Deutsch

En Français

In Italiano

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Sparkle combines an all-in-one approach, an understandable interface and a focus on producing high performance and search engine optimized websites. 

All in a powerful native Mac app. 

Nothing else comes close.

Copyright ©2021 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.