Create your first widget in under a minute

Widget.diy has exactly two screens, and neither of them needs a manual. This walk-through uses a Wikipedia page, but any public URL behaves the same.

1. Paste the URL

Open the editor and paste a page address into the top bar. The page renders inside a scaled canvas. Device chips above the canvas switch the emulated page width (desktop, laptop, tablet, phone) — useful when the source site is responsive and shows different layouts per width.

2. Frame the region

Drag a box over the part you want. Three helpers make this precise:

• The scroll rail on the right moves the page under your box, so regions far below the fold are reachable.
• The handle under the canvas stretches the visible area when the region is taller than one screen.
• Arrow keys nudge the box 1px at a time (10px with Shift).

The four numbers in the sidebar (left, top, width, height) are the source of truth — type into them directly if you know what you want.

3. Preview at real sizes

The preview page shows your crop at its true size and, below it, a gallery of common embed boxes: tiny 320×240, square 300×300, sidebar strip 300×600, phone portrait 390×844 and more. If the composition breaks at some size, switch the fit mode — contain and cover rescale the crop instead of clipping it.

This page is also where you set silent auto-refresh, edit the title and description, and copy the embed code.

4. Ship it

Press Save changes, then copy either:

• the widget link (https://embed.widget.diy/Ab3xK9pQ style), or
• the ready-made <iframe> snippet.

Paste the link into Notion's /embed, Lark docs, Obsidian, or the iframe tag into any HTML page. The widget renders edge to edge with no chrome.

What happens after you edit

Every save bumps the widget's revision. Embedded pages notice the new revision on their next load and refresh themselves — old embeds never show a stale crop.