Documentation

Guides, tutorials, and frequently asked questions

Custom Widget Editing in WidgetCraft: Layers, Data and Real Limits

Frequently asked questions

What is WidgetCraft's editor like to use?
A drag-and-drop interface you combine elements in, in the spirit of a design tool rather than a form to fill in. Every widget is a tree of layers, and you edit a layer by selecting it and changing its properties.
What can layers do in WidgetCraft?
Add, delete and duplicate them, change their front-to-back order, set opacity and blend modes, and give each one its own animation. You can also rename, lock, hide, nest one inside another, or pull a nested layer back out to the top level.
What data can a widget display?
Text and numeric elements can bind to dynamic sources including the system date, weather and health data, and update themselves automatically. You can also fetch from any HTTP API, run a JavaScript snippet, or read your calendar, battery and storage.
How much can I put in one widget before it breaks?
WidgetCraft estimates the decoded memory of every image and GIF you add and warns you once a widget passes 15 MB, which is the point at which a widget can be killed before it renders. GIFs are the usual culprit, because a GIF is width × height × 4 bytes per frame.
Do I need to pay to build my own widgets?
No. Custom backgrounds, colours and content are always free, and the free tier keeps one widget per size. Pro removes that cap, unlocks the Pro widget library and the premium editor features, and is available monthly, yearly or as a one-time lifetime purchase.
Does the editor need an internet connection?
The editor itself works offline. Weather, calendar, battery and other on-device sources do too. HTTP API sources, JavaScript scripts, web images, GIF URLs, Tenor search and AI-assisted design all need a connection.

The short answer

WidgetCraft's editor is a real layer-based design surface, not a settings form. You build a widget out of layers — containers, text, arc text, images, GIFs, shapes, buttons, charts and grids — and every layer carries its own layout, appearance, effects and animations. Text and numeric layers bind to live sources: weather, location, battery, storage, CPU, network type, Health, Calendar, date and time, any HTTP API, or a JavaScript expression you write yourself.

The part most competitor pages skip is where it stops working. A widget over 15 MB of decoded image and GIF memory will be killed before it renders. iOS caches widget timelines, so your edits do not appear the instant you save them. And the free tier keeps one widget per size, so "customise everything" hits a wall sooner than the word Pro suggests.

If you would rather look than read, WidgetCraft is on the App Store; the product page covers the widget library. This page is about the editor, and whether it is enough for what you want to build.

Why you are looking at a widget editor at all

The question behind "can I customise widgets" is usually one of three: you saw a design you like and want your version (a template solves this); you need one specific thing on your home screen — a countdown, a train time, a chart (this is the editor's real job); or you want a whole screen to match an aesthetic and will rebuild every widget yourself. The failure mode is not a bad interface. It is designing at one size and finding at the end the widget does not survive being resized.

The layer system is the whole mental model

A WidgetCraft design is a tree of layers. Containers (VStack, HStack, ZStack, Grid) hold children; content layers (Text, Arc Text, Image, GIF, Date, Chart, Button, Spacer) sit inside them. The layer panel shows the tree with expand and collapse, a search box, and a name, visibility and lock flag on every row. Any layer can be added, deleted, duplicated, renamed, hidden, locked and reordered, inserted at a chosen point, nested, or Extracted back to the top level.

Layout decides whether a widget survives a real home screen:

  • Positioning is Absolute (from the canvas top-left) or Relative (to its parent); relative inside stacks is what makes one design work at several sizes.
  • Size mode is Fixed, Flexible (with min and max constraints), Fill, or Fit. Flexible with a sensible maximum is what lets a long value shrink instead of overflowing.
  • Anchors cover the nine points; containers set their own horizontal and vertical child alignment.

Effects are close to a design tool: opacity, corner radius, background and foreground colour, blur, scale (X, Y, anchor), shadow (radius, offsets, colour), 2D rotation with an anchor, and 3D rotation around X, Y or Z axes, plus brightness, contrast, saturation, grayscale, hue rotation, invert and multiply. Blend mode has 17 options — Normal through Luminosity, including Multiply, Screen, Overlay, Soft Light and Difference — which is how a gradient reads through a solid shape. Animations are per layer and there are two: Swing, a back-and-forth motion with a direction and distance, and Rotation, a continuous turn whose period is one revolution, around a chosen anchor. The canvas has a Show Grid toggle and a Clip to Edges toggle; the latter shows you at design time what iOS will crop.

What you can actually bind data to

Text and numeric layers, charts and grids all take a data source, grouped into categories in the picker:

  • Weather (Now) — temperature, feels-like, condition, today's high and low, humidity, UV index, cloud, pressure, precipitation, visibility
  • Wind — speed, direction, gusts; Sun & Moon — sunrise, sunset; Location — city, region, country
  • System — battery level and charging status, memory, storage used and available, CPU usage, network type and name
  • Health — steps, distance, calories today; Calendar — next event title, time, location
  • Date & Time — year, month, day, 12- and 24-hour time, minute, second, h:mm, HH:mm, h:mm a, MMM d, weekday, full date, or a custom DateFormatter pattern you type yourself
  • Data Provider — a named source fetched at runtime, with a fallback value so the layer shows something rather than nothing when a fetch fails
  • HTTP API — any URL, with a field path and parameters, plus a test that shows the response before you commit; Custom Script — a JavaScript snippet that fetches and processes the data, with validation and a test run

The Date layer shows the time, the date, a relative time (2 hours ago), an offset from now (+2h, -7d) or a live countdown timer (2:30:00) — the one-liner way to build a countdown widget without binding anything.

Charts take the idea further: line, bar, area, point, with stroke width and dash pattern, curve smoothing, fill opacity, point radius, grid lines, annotations, axis configuration and a legend. Sources include hourly and daily temperature, precipitation, wind and humidity, weekly steps, distance and calories, daily heart rate, and battery, memory and storage history. A Grid takes a manual rows-and-columns size, a calendar month or week, or an HTTP source, and clones a child layer you designate as the cell template once per cell. Image and GIF layers take SF Symbols, App Store icons, your photo library, files, a web URL, or an HTTP API response; GIFs can also be converted from a video or Live Photo, or searched on Tenor.

What fails, and why

1. The 15 MB ceiling. WidgetCraft decodes every image and GIF you add, estimates width × height × 4 bytes × frame count, and shows the figure in the info panel. Above 15 MB it warns that the widget may crash. A GIF is why: 400 × 400 pixels and 60 frames is about 38 MB of decoded bitmap however small the file. Shaving the file size does nothing — the limit is on decoded memory, so cut frames or change source.

2. iOS caches widget timelines. A widget is not an app that redraws when you look at it. Your design is published and iOS decides when to render it, so the home screen copy can be the old one until the timeline refreshes. The editor's Refresh Dynamic Data clears the editor's own cache so you preview current values; it does not force the home screen to redraw.

3. Permissions gate data, not the app. Health data is read-only and the authorisation sheet appears when you add the widget, not at first launch. Before it appears, any widget reading Apple Health shows a pink heart badge labelled "Data from Apple Health" on its preview. Calendar and location are requested the same way; deny one and that layer has nothing to show. Anything needing a network — HTTP sources, JavaScript, web images, GIF URLs, Tenor, AI-assisted design — shows nothing offline even though the rest of the editor works offline.

How it compares to the obvious alternatives

Versus coding it yourself: full control, plus a WidgetKit extension target, a timeline provider and a build-install cycle. That cycle is the cost; WidgetCraft's trade is that a design takes minutes and deploys through the iOS widget gallery. Versus Scriptable-style tools: faster for one-off text substitutions, much weaker as a design surface. Templates cover 200-plus presets, and most people who want "that clock, but with my date on it" never need the editor — though opening one there hands you every layer it was built from.

What WidgetCraft does differently

  • A real layer model, not a template customiser. Containers nest, layers extract back out, and every layer owns its effects and animation, so you can build a composition no template offered.
  • 17 blend modes and 3D rotation per layer, on every layer, including text.
  • Data sources past weather. Battery, storage, CPU, network type, location, Calendar, Health, arbitrary HTTP APIs with a fallback, and JavaScript — plus charts over the same sources.
  • Export. Any design exports as a JSON file or a complete widget package, so you are not locked into the app.
  • Adaptive colour. The colour picker takes one colour or adaptive light/dark values, with the dark value auto-derived or set by hand, so a widget built once works in both appearances. The canvas has a Light / Dark / Auto toggle.

Honest limits:

  • It is a design tool, not a code editor. No arbitrary scripting beyond a JavaScript data source, and no way to add a new layer type.
  • Requirements: iOS 18.0 or later, iPhone and iPad, no account needed to create widgets. The editor covers small, medium, large and extra large plus Lock Screen accessory families, while the marketing copy advertises small, medium and large. AI design generation is a separate, network-dependent feature from the layer editor.
  • Free tier keeps one widget per size. Pro removes the cap, unlocks the Pro widget library and the premium editor features, and is available monthly ($4.99), yearly ($19.99) or as a one-time lifetime purchase ($49.99) in the US, with local pricing elsewhere. Custom backgrounds, colours, content and importing your own widgets are always free.

So should you use it

WidgetCraft's editor is worth it if you want a composed, multi-layer design with live data and effects on individual layers, and you want it now rather than after a build cycle — particularly if you want widgets that look right in both light and dark mode without building them twice. It is not worth it if you need one text substitution, full programmatic control, or more than one home screen widget per size — that limit is about slots, not about what you can design.

Open one template, tap Edit, and the layer panel tells you in about a minute whether this is the tool for you. Download WidgetCraft or start with the first-widget walkthrough.

Related apps