Interactive Tutorial Prototype

Your saved glitch project is Loading...
Reset Saved Project
Load Existing Project
Step 1
 

Testbed

Let's go over a few things that we'll want to show off in our tutorial!

First is some text. In order to make things more readable, we're going with a more compact text display than typical for our docs. We'll display some inline code that, if I'm not careful, can mess up the line spacing. I'll sometimes want things in bold or in italics. And I'll often want to use Links to external sites. that pop up in separate windows.

We'll have unordered lists!

  • These will be useful sometimes.
  • To show off lists and stuff
  • What an amazing list!

Sometimes we'll want to show off some images. Like let's take a look at this fancy animation!

An animation to create a link token

And here's a smaller image

An animation to create a link token

Sometimes we'll show off little inline code blocks using the SmallCodeBlock component:

console.log('Hello world!');

Sometimes we need to put things in callouts.

We had to create a custom style for our Callout so that it had a margin below. Otherwise things looked weird.

This is what a codeblock looks like. This is how we'll ask developers to copy and paste large chunks of code into our sample app.

1const linkTokenConfig = {
2 user: { client_user_id: CURR_USER_ID },
3 client_name: "Plaid Tutorial",
4 language: "en",
5 products: ["auth"],
6 country_codes: ["US"],
7 webhook: "https://www.example.com/webhook",
8};
9const tokenResponse = await plaidClient.linkTokenCreate(linkTokenConfig);
10const tokenData = tokenResponse.data;
11res.json(tokenData);

Pretty nifty, huh?

And that's about all we have! Want to see a bit of a tutorial in action? Go to the next step!