Films – Flowweaver

How it works

The four steps from the start page, done in the tool in just over a minute: the guide is drawn, stored, shown on your website — and the answers go where you want.

The film in text

The editor draws the guide: a result is dragged from the palette, named and connected to the question.
The guide is stored in any data source: File → Export guide, and the file the editor wrote is shown — a file, a database or your CMS, your choice.
The viewer shows it on your website: a page with one script tag and the element, and the guide runs there.
The answers go where you want: a case is submitted, the receipt with its reference number is shown, and what the recipient got is listed below it.

How it goes

A whole guide built from an empty canvas in a minute: one question, two answers, two outcomes — then run the way a visitor meets it.

The film in words

The editor opens on an empty canvas.
A Question is dragged out of the palette and placed.
It is the guide's start node — the first step in an empty guide becomes the start by itself.
The question is written: Do you rent or own the home you live in?
The answers are renamed Rent and Own.
Two Results are added: You may be entitled to housing allowance and You are probably not entitled.
A line is drawn from each answer to the outcome it leads to.
The guide is run in the preview, Rent is chosen, and it lands on its outcome.

Which routes lead here?

The lines say where an answer leads. The question the other way round — how somebody ends up at a given answer — stops being readable from a drawing as soon as there is a rule in the middle.

The film in words

The whole guide is shown at once: two questions, a rule, three outcomes.
Right-click on the result Housing allowance is unusual in your situation and choose Show the routes here.
Every connection that can lead there lights up green. The rest drop back, along with the answers and nodes that are not on the way.
The answer: No to the children question and No to the one about being under 29. Nothing else reaches that outcome.
The same route is then followed at full size, one node at a time.

Open the guide in the editor and try it — right-click a result and choose Show the routes here.

Undo for real

Do you dare change a guide that is live? The film makes the whole round trip: open another version, rewrite, publish — and take it back.

The film in text

The version list shows three rows; Housing allowance is the published one — what the visitor sees.
The row Before the rules changed is opened in the editor.
The question is rewritten to Have you lived in the municipality for a year?.
The visitor's pane stands still — it is drawn from the published version, not from what is being written.
Save, then Publish — only now is the visitor's pane swapped.
Publish on an earlier row takes it back: the visitor is back on what worked.

Another language

The guide from the build film learns English: the source stays put, you only write your language — and then the same guide is run in English.

The film in text

The guide from the build film: one question, two results, in Swedish.
The source selector is switched to English — translation mode turns on, and the Swedish source is shown as reference.
The question, the answers and the results are written in English, field by field, with the original as the placeholder in every box.
The counter in the toolbar counts up until everything is translated.
The guide is run in the preview — now entirely in English, buttons and all.

The guide already knows

An application behind a login, two fields. The host already knows the name, so the guide does not ask again; the municipality is looked up in the host's list. No backend in the library — the contract is all the host builds.

The film in text

The guide: one page with Name and Municipality, and one answer.
The editor writes Why do we ask this? on the municipality field — the visitor can unfold it at the question.
The answer uses the visitor's words: {{namn}} and {{kommun.label}}.
Below Answers from the host the line namn = Anna Berg is written — what a login would give. The run opens with the name filled in.
Three letters in the municipality field, and Umeå comes from the host's lookup — no list in the guide.
The answer: Thank you Anna Berg. The application goes to Umeå kommun.

Counting while answering

The preschool fee depends on the income and the number of children. The formula sits in the page like a spreadsheet, and the amount is recalculated with every digit the visitor types — no Next to find out.

The film in text

The guide: one page with Household income, Children in preschool with plus and minus buttons, a calculation and an info box.
The calculation is opened: four rows, the last one round(forsta + andra + tredje). The capped fee's percentages and ceilings sit in the formulas, not in code.
The run: the income is typed digit by digit, and the info box says SEK 1,739 a month as soon as the number is complete.
One tap on plus: two children, and the same text says SEK 2,898.
Next only shows what the visitor already knows: The fee comes to SEK 2,898 a month.

One more child

An application where the visitor enters their children — how many, nobody knows in advance. The fields for one child are built once, and the page repeats: the visitor adds the next child with a button, and the guide counts.

The film in text

The guide: one page, Your children, with two fields, Name and Year of birth, marked × child, and one answer.
The page's panel: the checkbox Can repeat is ticked, and What repeats says child.
The run: Child 1 is filled in — Elsa, 2019.
The button Add child: Child 2 with the same two fields, no copy in the guide — Noah, 2022.
The answer: The application covers 2 children, with both children listed below.

Looks like your site

The guide sits on your site, so it should look like your site. The colour scheme is chosen in the header and the guide follows — four schemes and dark mode, without a line of code.

The film in text

The guide Do you have toothache? on a page, in the default Indigo scheme.
The header's Colour scheme menu: Sea, Forest, Slate, Brick — the guide and the page change colour with each choice.
The visitor answers Yes and presses Next: Go to the dentist, in the same colours.
The Dark mode button: the same page, the same scheme, dark.
Closing line: a scheme is a few colour values on the element, the way a host sets its own. No stylesheet to rewrite.

No mouse

No pointer in the whole film. F6 between the editor's parts, the arrows between nodes, and a connection made with Enter on the output and Enter on the input. The keys are shown on screen as they are pressed.

The film in text

The guide Do you have toothache? in the editor, the answer No not yet connected. Focus is on the File menu.
F6, F6, F6: the actions, the palette, the canvas.
Tab onto the question. Arrow right to Go to the dentist, arrow down to Go to the sweet shop, arrow left back. Enter selects the question.
Tab to the output No, Enter. Arrow down to the result, Tab to its input, Enter — the connection is there, No problems.
The question mark: the list of keyboard shortcuts. Esc.
Closing line: nothing in the editor needs a pointer — a requirement, not a feature.

Twenty-four nodes

The printer guide: four branches, twenty-four nodes — the guide nobody holds in their head. The map appears when it no longer fits, the rectangle in it is what you see, and Paths to here lights the route across the whole guide.

The film in text

The guide The printer does not print in the editor, the whole flow fitted to the frame. No map — everything is in view.
Ctrl + wheel in on one branch. The map appears in the corner, with a rectangle for what is on screen right now.
The rectangle is dragged in the map to the start of the guide. The canvas follows.
The canvas is scrolled away until no node is in view. The button Back to the guide appears; one click, and the guide is back.
The rectangle is dragged to the answer Clear the print queue, furthest in. Right-click, Paths to here: five nodes light up, the rest fade.
View, Fit to content: the whole guide in frame, the path across it — four questions, one answer.
Closing line: twenty-four nodes is where a drawn guide usually becomes a wall; here it is a map.

One tag

The whole page is thirteen lines: one element, one script tag and the guide. Open the file from the desktop, put the element on your site — it takes your colour. Web standard, no dependencies, and browsers from 2022 onwards.

The film in text

The file guide.en.html as text: thirteen lines. <guide-preview>, one script tag for the viewer, and the guide — one question, two answers, one result.
The file opened straight from the desktop, no build, nothing installed. The question is there; Yes is chosen, Next, and the answer You can go ahead appears.
The same element on the example site, in the Forest colour scheme: the guide takes the site's colour. Dark mode is switched on — the guide follows.
package.json with no dependencies, and the viewer as a single file, measured as served. We depend on no one else — we take responsibility for it working.
The floor: from 2022 onwards — Chrome 98, Safari 15.4, Firefox 95 — measured in the shipped code.
Closing line: a web standard is the choice that nobody else decides when it stops working.

Five reasons, five proofs

Five reasons to use Flowweaver, and the proof for each one — in the tool, in a minute and a half.

The film in text

Content, not development: the question in a finished guide is rewritten right in the editor — no ticket, no code.
The preview does not lie: the guide is run at once, and the rewritten question is there word for word.
You can change your mind: on the versions page an earlier version is published again — the visitor's pane switches the same moment.
Accessibility is built in: a guide is answered with the keyboard alone — focus visible, one question at a time.
The data is not stuck: File → Export guide, and the whole guide leaves the tool as a file in a standard format — a safe copy, or something to read into another guide.