Skip to content

UX Prototyping & Protopie

  • Principles
    • Educational
    • Figma Integration
  • Patterns, Pitfalls, Ploys
    • Patterns
    • Pitfalls
    • Ploys
  • More …
    • People-Centered Design
    • Thinking about AI
  • Principles
    • Educational
    • Figma Integration
  • Patterns, Pitfalls, Ploys
    • Patterns
    • Pitfalls
    • Ploys
  • More …
    • People-Centered Design
    • Thinking about AI

parseJson gives no error message

parseJson can only return a node at the bottom of the JSON structure and cannot return an object – which means it is very important that you know the structure of your JSON and that it doesn’t vary.

Also, it is important to construct your request string very carefully as there are no error messages returned to tell you you have got it wrong. The solution to this is to find a way to check whether parseJson has returned “” and if it has, do something to alert you (change the colour of an object, for example).

Another common mistake is to use the indices, 1, 2, 3 etc when something has multiple values – whereas in fact parseJson uses the indices 0,1,2 etc. Thus, in my quiz with ten questions (which pulls data from a trivia API), I use the indices 1-10 to represent each instance of the question component (in a variable called “Identity”), but in the extraction of the question from the data returned from the API I have to use the index “Identity”-1.

Here is a pie which allows you to explore how sources and keys work with parseJson – it contains some simple examples, but you can edit the fields to try your own values – select the source style and then type the key and enter (or hit go).

Check if your other pie is present

When building a connected system it can be valuable to know if the other pies are loaded into Connect or not – for examples so you don't get stuck waiting for a message that will never be sent.

Use Variables

Variables are very powerful simplifying tool and they do not seem to have any impact on Protopie's performance.

Why use Protopie?

There are many prototyping tools out there, so what makes Protopie special – how is it different?

Sending and receiving mismatched messages

You can send messages in different ways, but Protopie requires you to receive them in the matching way. A common (and easy) mistake is to send a message to a 'parent' while wanting to receive it from the current scene.

Sending messages to two places

Whilst it is important to be careful in sending messages to the right places, it is also very powerful to send a message to two different places at the same time (or maybe with a small delay).

Using the wrong mental model for Protopie

Most prototyping tools for designers use the frame-by-frame, or multiple dartboards model. But Protopie is much closer to a developer's object-oriented model of an application UI.

Receive and Assign hazard

Receiving a message, and then assigning a value and then writing a conditional based on that value is that something that is quite a normal, conceptual pattern – but in Protopie it will often not work as expected. This is because responses to Protopie triggers all happen simultaneously and not in the order written.

Check if Protopie Connect is present

If you are building a prototype that depends upon Protopie Connect then it is a good idea to start by checking if Connect is actually present.

Rough, Rapid, Right

Viewing variables within Components

Put code inside components

Good Prototyping Practice

Working with Components

Use Components

  • Welcome
  • What’s New?
  • About
  • Welcome
  • What’s New?
  • About

info@peoplecentereddesign.org

© 2026 David Gilmore