Visual Editing With Storyblok

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON LENGSTORF: Hello, everybody. And welcome to another episode of "Learn with Jason." Today on the show we have Samuel Snopko. Thank you so much for being here today.

SAMUEL SNOPKO: Hey, everybody. Thank you also for the invitation. I'm looking forward to it.

JASON LENGSTORF: Yeah, this is going to be great. I'm really excited to just kind of see what you've been working on. I feel like you're doing some really cool stuff. We had a chance to chat about it on another show, where we actually made this plan. So, I'm very excited to kind of take a look and dig in. But before we start with that, let's talk a little bit about you. For those not familiar with your work, can you give a background on yourself?

SAMUEL SNOPKO: Definitely, I can give you a little bit of a background. Stop me if I'm talking too much or too long, because sometimes it happens to me. Basically, I'm quite new in the developer relations, officially, but I was always in the communities and stuff. So, my backgrounds are the IT, I was basically knew that I wanted to build, not a website, but games from 15, but never get to that. I get to the boring stuff of software analytics, then my future wife decided to move to Germany, so I went with her, and I didn't know the good language, I had to switch, so I switched to the web development. That was like six years ago, approximately. And that's, I have to say, much more fun than the software analyst, because you can really build something and see the results, what they are doing and changing. And then I was doing a lot of stuff, mostly I would say CSS, and then at that point of time, I choose new framework. And I choose what was new, pretty cool, I really liked it. A lot of different for different compared, but definitely, I faced one problem. And the problem was like, I was like super happy with my stack, but was not happy with where and how to take care of the stack. Then I was looking for all the CMSs out there. And I was really trying, 2017, I was trying different stuff, all the big players right now. And I find out Storyblok somehow, and what's crazy about the Storyblok, that was the first time I write software channels to somebody. Hey, I had a crazy idea, could you fix this little stuff? Yeah, that's a good idea. Next day, it was deployed, I was like what is going on? And that was like how I find, basically, the future stacks, and then kids happened. So, we moved back to the homeland, and now I'm living in Austria, and by accident, Storyblok is also from Austria. So, by all the coincidences, it's happening that I made friends in Storyblok with guys who build it and came up with the idea. And now we are working together to make the headless world and change the landscape of the CMS, I would say. That's my story.

JASON LENGSTORF: Nice. I love stories like that. I think, you know, it's such a good vote for the, like, you know, participating in open source, growing your community, and seeing where those connections can lead you. But, yeah, that's really exciting. So, let's talk a little bit about what Storyblok is. Also, hello, chat. I see a bunch of familiar faces today. Good to see you all, thank you for coming and hanging out. So, Storyblok is a visual -- headless CMS, right?

SAMUEL SNOPKO: Yep, headless CMS.

JASON LENGSTORF: Okay. So, I guess -- so each headless CMS that I've seen usually has kind of like their thing, the thing they are really proud of about their headless CMS. So, what do you think is the differentiator for Storyblok, the thing that makes it unique?

SAMUEL SNOPKO: I would say, first thing that everybody will tell you, it's probably the visual editor, the visual part. And we are exactly headless CMS in the way many others, we get inspiration from the other headless CMSs and basically everybody in the Storyblok was the accidental working with different CMSs and model analytics. CMS systems from the enterprise level, to small and open-source levels. But at the end, most important for the CMSs are the content editors, like how to edit the content. And all the non-technical features. So, we want to build something, they are happy, and that's the headless part, more or less. You can choose your tools, you can choose your technology, but still you want to keep happy all the marketers, all the content editors. And those people really like the page builders, for example, and the way that they visualize the stuff, build the stuff, and interact it. So -- we came with the idea, we came our founders, that was one of the first features, how to connect the visual aspect of the new frameworks with the headless part, and it's working quite well. Super fast. And I hope that I will present it. So, you have a visual editor, and additionally all the features like scheduling content, pipelines, all the stuff that is needed from enterprises. So, you can build your own schema, you have also the draft content, the publish content. You can create so many APIs and stuff like that. First lies with the visual editor.

JASON LENGSTORF: Cool, yeah, and visual editors are a fascinating thing, because when they feel good, it's so nice to work with one. So, I'm really excited to check it out, to dig in. I see -- thank you for the boops. Good to see you. Also, did everybody see the Jamstack effect that Linda put together? That one is new, finally got it running. That is -- I think that's a good point to switch over, right, we can start looking at Storyblok. Let's move over here.

Your code has found you.

JASON LENGSTORF: I didn't even know you put that one in there. I should probably review these before I just merge them, huh? Okay, so, let's look at the view over here. So, first and foremost, remember, every episode, including this one, is live captioned. So, we've got Ashly with us today from White Coat Captioning doing live captioning. So, if you want to follow along, that's right on the home page of learnwithJason.dev, so head there and get the captions for the show. Then the show, the captions, it's all made possible through the support of our sponsors, we have Netlify, Fauna, Auth0, and Hasura all kicking in to make the show more accessible to more people. It means a lot to me. Thank you so much for your support, and keep in mind when you're over there looking at the captions, you can click on any of these to check out the sponsors. Also, while you're checking things out on the Internet, make sure you go and follow Samuel on Twitter. So, you can go, there's the Twitter account there. I guess I should follow it, too. Why am I not following? Geez, I got to remember to click these buttons. Yeah, go and do that, ring that bell, all that stuff, do the thing, smash that like button. And we're going to be working with Storyblok today.

SAMUEL SNOPKO: Yep.

JASON LENGSTORF: Okay. So, I'm ready, I'm excited here. Let's take a look.

It would be neat if this just works.

JASON LENGSTORF: It's going to work.

SAMUEL SNOPKO: Should I tell you what to do first, or do you want to experience the stuff I love?

JASON LENGSTORF: Normally, so if I was doing this on my own, what I would do is kind of jump in and probably use this try Storyblok button and find out what happens. But so that people don't have to watch me read the docs, today you're going to be the onboarding experience and kind of guide me through how should we do this, what's the happy path, so we can show that experience for everybody. So, if I am going to take my first steps, what should I do first as a Storyblok newb?

SAMUEL SNOPKO: So, this is one of the biggest tasks I am working on. Basically, changing the schema of how you should learn that. I would definitely send you to the resources, and depends how new you are. So, you can start getting started, definitely, or you can get to the developer guides, if you want to learn more about the Storyblok. So, what is the space, what is story, what is the field, and all that stuff.

JASON LENGSTORF: Oh, yeah, okay. This is like the high level, if I really want to understand how things work.

SAMUEL SNOPKO: Yes, exactly. This is definitely helpful. One part of it still. And there is already advanced, but you would be also, you can go to resources, and I should point out the technologies. On the right side, technologies, and we have at the moment three big hubs. Next, nuxt, and the Gatsby, where basically we visit these technologies. I don't know which you would like to, and then you should have all the pointers, like to also getting started, but, for example, check next.js, e-commerce, video of me from my talk where I'm explaining how to do it in 30 minutes. If you scroll down, getting started, cheat sheet, tons of materials. Really, you can spend here a week probably. And I don't know everything of that probably, the moment, because there's a bigger team, and everybody's taking care of something.

JASON LENGSTORF: Yeah. This is cool. Yeah, so you've got content all over the place, which is great. Oh, and you're kind of -- this isn't all content on Storyblok. This is like -- this is a link to the next docs. Yeah, this is cool.

SAMUEL SNOPKO: My idea about these hubs, I call them technology hubs, is you should learn the next.js with Storyblok. So, if you want to learn how to do a routine, we point you to the next.js documentation, because it's explained there. It will be updated also sooner than our docs probably.

JASON LENGSTORF: Nice, yeah, no, that's great.

SAMUEL SNOPKO: But now, let's for the getting started.

JASON LENGSTORF: Let's do it. I'm going to go to getting started. And in here, let's see, I'm going to sign up for Storyblok. Okay. Let me pull this off screen, I'm going to generate a password for it.

SAMUEL SNOPKO: I will check the chat.

JASON LENGSTORF: Okay, I have signed up. After I have signed up, shows me this, are you a dev? I am a dev. Do I want to create a new space, we're going to start from scratch, right?

SAMUEL SNOPKO: We are going to start from scratch. So, create a new space. If you go for demo, there's a demo with a lot of components, you can experience, see how it works. Basically, build a website, but that's the point if you want to manage the content. You'll not see the code, because the code is running already. That would be like everything we set up for you, experiment, and something like the content editor or the marketers to see how the editing and visual editor works.

JASON LENGSTORF: Yeah.

SAMUEL SNOPKO: So, what you see here, you can close that. I'm your guide today. This is already getting a little bit deprecated, so all you see here probably we'll have to do one more recording in a matter of a few months. Here you see the content. You're in the section, where you would manage your content. Representation of your home page, and we call it the home story, because not every story is also the website. It's also something with your application, or you do iOS, then you get different stuff. So, here in the middle is the visual editor, which is not set up correctly at the moment, because we don't have any URLs, so it's not configured. So, that will be something we will do in a second. On the right-hand side, you have a page, page is at the moment an instance of the content type that we call page, and we have the one field called body. Hit the different schema, as you are a developer we can do that. See here this body is added by you, basically, this is just the default we add, something that is not empty. If you click on the body, yep, on the field, types blocks. And we have different types. So, you can close this, and look on it, sorry, I don't want to be something like, hey, you have to do this. This body, add any other components. This is just for you to explain what we are doing at the moment. So, if you now close this, cancel. You see that in the body you added already teaser and grid. And the teaser, yeah, you can reorder them, exactly, but don't have visual priority for that at the moment.

JASON LENGSTORF: That's right. I got you, I got you.

SAMUEL SNOPKO: That will be our code.

JASON LENGSTORF: Okay, all right.

SAMUEL SNOPKO: Or your task. So, if you hit the save button, just to be sure, and go to that arrow on the right side and do the draft JSON. Then you will see, basically, this is the JSON you'd get, or you can also use the graph if you want, but that would look definitely different.

JASON LENGSTORF: Okay. So, that's actually really slick we can do that, where we can pull in, get the draft and the published version, too.

SAMUEL SNOPKO: Yes, but you have to publish. You didn't publish this at the moment. If you click the publish, you'd see nothing at the moment.

JASON LENGSTORF: Yeah, yeah, so this is slick. This is really nice.

SAMUEL SNOPKO: And if you click on the grid, also you see on the level, click on the grid, inside there are the features, and these features are components, which if you now click the different schema, maybe I am too fast, this is the schema of the features.

JASON LENGSTORF: Got it, okay, all right, I'm with you.

SAMUEL SNOPKO: Yeah, cool. Cool, so, cancel, cancel. So, at the moment, that's more or less what you can do. You could save, you could do publish, and if you would have a web hook, that is basically what to do, like you can even hide visual editor. So, if you go for the two arrows, yes, exactly. This is usually what you get as a headless CMS.

JASON LENGSTORF: Got it. So, if I don't want to do the visual editor, I can throw this stuff around. That makes sense. Cool, okay.

SAMUEL SNOPKO: Always cases like that. You have ones that don't have a page, name and something, we create them as stories. So, now if you go out, please go on the left-up corner, the arrow back.

JASON LENGSTORF: Okay.

SAMUEL SNOPKO: Here, content. There are different sections, but for you as a developer, you go for component, yeah, and here are the components who are defined at the moment. These are added to every space if you create it, because it's a little bit tricky to create the empty space. This is exactly what we already saw in the schema, so these are the schemas of my components.

JASON LENGSTORF: Nice, okay.

SAMUEL SNOPKO: And can you zoom out a little bit, because there are two columns that are hidden at the moment. Yes, that's enough. So, you can see there is a content type and table. So, these are the two types of components we have.

JASON LENGSTORF: Nestable means -- so, page, I can't put a page within a page, but I could theoretically put a grid within a grid?

SAMUEL SNOPKO: Yes.

JASON LENGSTORF: Okay, I got you.

SAMUEL SNOPKO: Contents are used to create the pages or the stories, and the nestable are used to create the blocks inside those pages or the content types, but also inside any other component. So, you can nest a component inside the nestable component, and create a never-ending change, and if you are familiar with the atomic design, then you get what you can do with it.

JASON LENGSTORF: Yeah, yeah, yeah. This is slick, this is really nice. Cool. If I want to just get started here, then to get something on my local machine, I go to one of these, right?

SAMUEL SNOPKO: Those are even super long tutorials, with multiple language, and the menus and stuff like that. But if you want to start with this, you don't have to do any big changes in space. Just go back to the getting started and there are step-by-step what you should do.

JASON LENGSTORF: Right, we had a getting started that I totally stopped looking at.

SAMUEL SNOPKO: We did that, exactly.

JASON LENGSTORF: Okay.

SAMUEL SNOPKO: I explained all of this more or less, I think.

JASON LENGSTORF: We looked at the JSON. Code, hey, code! I need a GitHub account to fork the CodeSandbox. I have both of those. Let's see, I know React better than view.

Oh, so we would need to add code.

JASON LENGSTORF: Is that right?

Oh, we would need to add code.

SAMUEL SNOPKO: Nice.

JASON LENGSTORF: All right. So, let me make this a little bit bigger so we can see what's going on. And I'm going to fork this. Am I logged in? I have to log in.

SAMUEL SNOPKO: Yeah, you have to log in. CodeSandboxes, you just log in, create the space, take API key from the space, and basically put it here into the CodeSandbox and see how your code would look like.

JASON LENGSTORF: Yeah. So, looking at Storyblok service, that's where I would put the API key? This is my token.

SAMUEL SNOPKO: Yeah, exactly. You have to take your token from the space. Exactly. That's one place, or you can go to the settings of the space and find it there. You can create multiple accounts, so API keys. Here you have public ones.

JASON LENGSTORF: I can name them.

SAMUEL SNOPKO: Exactly.

JASON LENGSTORF: That's probably even a better idea, because then I know where it came from and it shows me. I like that.

SAMUEL SNOPKO: Please, do preview access level, because there's something special on the access level.

JASON LENGSTORF: Create a new one, preview. I'm going to take this, head over here, and drop that in. Save.

SAMUEL SNOPKO: And you need to do one little hack, and that's go to the server tab in the CodeSandbox. In the CodeSandbox, they cache a lot of stuff to make it more powerful, so these are some stuff you have to then restart.

JASON LENGSTORF: Okay.

SAMUEL SNOPKO: Which is cool, and you can see already your code, sorry, your content in your preview. So, this is exactly what you have to do. And there is some enhancement, and you can also take that URL and just open it in a new tab.

JASON LENGSTORF: In a new tab.

SAMUEL SNOPKO: Show that it works. And you can send it to anybody.

JASON LENGSTORF: Yeah, yeah, if you want to look at this, there you go.

SAMUEL SNOPKO: It's working, looks much better than last time I did it. Here in this part, I was like debugging, disturbed, looked for 15 minutes on live-stream.

JASON LENGSTORF: Oh, no!

SAMUEL SNOPKO: Because I forgot that server restart.

JASON LENGSTORF: Oh, okay. If I want to -- what I was looking at is when we were in here, showed my server address. So, if I want to do that, my guess is it would be in settings, and I'm thinking it's here, is that right?

SAMUEL SNOPKO: Exactly. Yes, yes, yes. Or you can add preview on the bottom. So, multiple environments, production or you have a Gatsby website. For example, in our getting started, I have a next, Gatsby, and also the next.js in the same space, just consuming the content.

JASON LENGSTORF: That's really cool, okay.

SAMUEL SNOPKO: Hit the save in the right corner. And it should work.

JASON LENGSTORF: Okay, so, I'm going to go back to my content.

SAMUEL SNOPKO: That's good.

JASON LENGSTORF: Looks like we're missing -- it's going to the wrong address.

SAMUEL SNOPKO: Exactly, good. So, now we have a little hack in the visual editor for that. You could do that in the code, but you could go to the config, and this is the home page, this is something special. Because we need -- don't change, on the bottom, over it for the visual editor, scroll down a little bit. There's a real part for visual editor, the optional one, add slash. Exactly. Hit save on the top. Basically, why is this happening, if you have a home story, you want to name it, and this name is usually slack. And the slack, in the website, index page doesn't have a slug usually, so this is an override to know this is the home page, but on the website, you want to code API, hey, give me a content of something, and if you want to get a content of homepage, you want to say give me content of the home. So you need to have some name. This is a good question. What's happened here?

JASON LENGSTORF: What did I just do? I broke something. So, let's go back in here and look. I'm saving.

SAMUEL SNOPKO: CodeSandbox didn't restart it correctly.

JASON LENGSTORF: I'm going to go back and refresh the page.

SAMUEL SNOPKO: One change in the Storyblok, please, in the content. Make Hello World to hello Jason. You have to click on the right-hand side at the moment.

JASON LENGSTORF: I got you, I got you. I understand. I'm going in here, going to change this.

SAMUEL SNOPKO: Yeah, to something. We are connected to the old space, the default one. It's not connected.

JASON LENGSTORF: All right. So, we updated this token. That's my token.

SAMUEL SNOPKO: Check the tokens, maybe we didn't save them.

JASON LENGSTORF: Thought I saved it. It's only in the one place, right?

SAMUEL SNOPKO: Yeah, only the one place. Did you save it?

JASON LENGSTORF: Doing stuff now. Try one more time, restart the server maybe. Really tricky, this is not used, like 100% sure.

JASON LENGSTORF: Wait, now it's picked up. Now it's picked up.

SAMUEL SNOPKO: Now if you reload here. Then we should see also --

JASON LENGSTORF: Aha. Okay, that means now I can click in here and do stuff?

SAMUEL SNOPKO: Yeah, should work. No, no, you cannot edit there. We are not so far away. There's also big discussion about if we want to do that in general, to be honest. So, if you now click, exactly, you can do a still life basically, drag and drop, page, level, or grid level, you can reorder the stuff, copy/paste.

JASON LENGSTORF: Nice, okay.

SAMUEL SNOPKO: You see which feature is basically also clicked, but you can edit still, sorry for that.

JASON LENGSTORF: I'm not publishing, so we're looking at previewed content, not live content.

SAMUEL SNOPKO: One very, very important stuff, you're using draft content by the way, draft token. So, you get the draft content here. The published would be basically you have one more environment, where you're getting the --

Behold, my bucket!

JASON LENGSTORF: Sorry, I couldn't hear you over the sound of me shouting.

SAMUEL SNOPKO: All good.

JASON LENGSTORF: So, you said this is a -- it's a draft token, which is why I haven't published this page yet, but we can still see it on CodeSandbox, which is what we want. What did you say after that?

SAMUEL SNOPKO: After that I said there's multiple strategies, basically, how to do the multiple environments. One way is that you could have a file where you say if I'm deploying to the vessel on Netlify, you'll switch to the production token.

JASON LENGSTORF: Got ya.

SAMUEL SNOPKO: So, you would use a different token. Now we have only the draft token, so you have always access to the draft content.

JASON LENGSTORF: We would do something like we'd put a process.m.Storyblok token, and based on the environment, choose the one that's right.

SAMUEL SNOPKO: Exactly.

JASON LENGSTORF: Cool, that makes sense.

SAMUEL SNOPKO: But what you can do right now, for example, is if you go back to the Storyblok.

JASON LENGSTORF: Back to Storyblok.

SAMUEL SNOPKO: If you go to page level or the grid level, you can drag and drop. And you see the live preview. You can even try different breakpoints at the moment.

JASON LENGSTORF: This is handy, I like this a lot.

SAMUEL SNOPKO: Even at the top, mobile icon, you click that one, and you'll get default mobile view, or tablet, and the desktop.

JASON LENGSTORF: That's slick.

SAMUEL SNOPKO: The feature, all to understand how it works, is that you do all the edits. So, let's say you open the grid and you copy/paste the content there. So, open grid, select everything please on the top. Just use a copy.

JASON LENGSTORF: Does this work with keyboard shortcuts?

SAMUEL SNOPKO: I don't think so at the moment, we will do redesign and I'll keep that in mind. Super handy, keyboard shortcuts. I'd love to have those. Now, if you notice, still didn't save anything.

JASON LENGSTORF: Okay, I got you.

SAMUEL SNOPKO: You don't have to save it to preview your content. So, the content editor, marketer, can try the content, see what it works, and save only the stuff he love. He's happy with.

JASON LENGSTORF: Yeah, okay, so, I as the person trying content things out, I'm making a mess in here, but even our preview site hasn't updated yet. So, when I save, it will update.

SAMUEL SNOPKO: Yes, you have to reload, because there is not connected.

JASON LENGSTORF: Right. So, we've got it saved there, and we can see our content, but it's still not published. So, this still isn't on the live site, this is on the preview site that I can share with the team. Okay, I'm with you.

SAMUEL SNOPKO: Why I'm saying that is there is this circle arrow next to the icon. So, JSON, the JA on the left, yeah, this one. That's the version. If you click it, you see all the versions you created as you saved, and you can go back in time very quickly.

JASON LENGSTORF: I like that. That's really nice.

SAMUEL SNOPKO: And I feel like this is so powerful for all the content editors, market editors, that can try and experiment. You have a few basic components here, but if you create tons of next commerce, for example, e-commerce side, all those sections you can use and put on the website. Then just experiment, and if you are happy, you save it and send it, hey, are you happy with it, can we publish it, and, of course, the defaults that -- workflows, pipelines, publishing the content in the future, stuff like that.

JASON LENGSTORF: Yeah, and this is it, something I can see that's really handy here is a feature that I live by at my job is when we are working on content, multiple people are going to edit this content, right? We get suggestions like I work on the developer experience team, but then we've got the marketing team, engineering team, product team, and as we're working on an article or a press release, each team is going to go in and make some kind of change. So, being able to look, okay, here's the change that I made, this is what actually changed, and the marketing team, see what they did, product did, and individually go back and say this change, though, I think I'm going to push back on, but I don't have to re-read the whole 1500-word announcement every time. I can just see what changed. That in and of itself is just an ultra valuable thing to have that, honestly, I miss in a lot of content management systems, because it's not there. That's super handy.

SAMUEL SNOPKO: So, you probably get the basics, and there are tons of other stuff, from -- I don't know, creating new components. If you want, you can create a very quick something. At the moment you have a future grid and teaser.

JASON LENGSTORF: Yeah, what's a feature? I'm going to put something else in here and just say --

SAMUEL SNOPKO: Okay, I know what we should do. We should explain how does it work. So, what is happening right now, to understand that helps people, this individual editor, that's -- where's the website, basically the CodeSandbox. On the right-hand side is the content editor and in between, JavaScript brief, that builds the Storyblok team and takes care of it. Every time you do something in the content editor, in the next, Gatsby, et cetera, et cetera. Even with PHP it's possible to do.

JASON LENGSTORF: Okay, when I actually look at this, this stuff I see we've got the editor, so I'm listening for Storyblok events. I can just check for that sort of stuff. Cool.

SAMUEL SNOPKO: Exactly. On the beginning, this is little bit older version of the next.js, and we have a better one, but I didn't want to confuse you with that. In the next.js, how it's called, the hoops, so we did it already with the hoops and it's a little bit cleaner. But I didn't have time to get that started. So, I recommend checking that out five-minute tutorial to next.js. Then, if you check the code out, and go to the page. Yes, pages. There's the -- here we're building the components. Components in the next.js are usually 1:1, but not always. Here we're expecting a Storyblok service, which is basically asking for the whole static link. This is something that you always do dynamically. Here for this demo, I ask for the whole page, something you would get from the slack using the routine. Then you will get that content from the Storyblok.

JASON LENGSTORF: Okay.

SAMUEL SNOPKO: Then what I did here, which is quite -- if you go to the bottom, here I'm sending the content of the story to the page component. So, basically, I'm creating a waterfall, where I'm sending the content down the stream, and then you finally see the special stuff, which is responsible for this connection between the component and the content editor. So, this SB editable, which sometimes in the old time we needed to rapid build with the special component. We linked to the hooks, we don't have to do it anymore. Basically, it will be just a prop on the main. You would trigger next code, only editable on any component you want to have a cable.

JASON LENGSTORF: Okay, I got ya. And this takes us into component blok, blok, with a key, and that comes out of index. All right.

SAMUEL SNOPKO: Yep. So, if you go to the Storyblok now and create a random component, you should get the placeholder up and running.

JASON LENGSTORF: Let's do it. I'm going to define a schema and call this one -- wait, I did this wrong. Create a new block at the bottom. However you would like to call it. Let's call it that, not been created yet, so, the schema, we can just do, let's say, a title and let's add a body. Let's make this one rich text and see what that does.

SAMUEL SNOPKO: Yep. Rich text is basically a prose -- how is it called? We have a widget, which you can get a JSON file structured rich text.

JASON LENGSTORF: Nice.

SAMUEL SNOPKO: You can do inside that also the components, and custom classes.

JASON LENGSTORF: Oh, slick. Okay. If I save this then, I have created my components.

SAMUEL SNOPKO: Redesign a few things. Now we see, okay, you can start editing basically, but you wouldn't see the result. You can edit, this is also a good sample, if you want to build article sections for your website, you can set up everything for articles in the Storyblok. You can let all the writers write the articles already, but the developers are working on the code. And nobody is blocking nobody.

JASON LENGSTORF: Got you. Now that I block this, I save it, and out here I need to create something to handle that, so, I need, let's say, a new file, so I'm going to call this LWJ component.

SAMUEL SNOPKO: Yep, exactly.

JASON LENGSTORF: And let's take a look at one of these to say what's in it. So, there's this SBEditable.

SAMUEL SNOPKO: Copy/paste basically.

JASON LENGSTORF: Yeah, copy/paste and pull it in. So, SBeditable, you said this is going to be in a hook in future versions.

SAMUEL SNOPKO: This getting started is older.

JASON LENGSTORF: Got you, and I can use my information here. So, I'm guessing that my rich text is probably going to need something different.

SAMUEL SNOPKO: Yes. Your rich text would need a renderer, but we have a renderer also. I don't know how to call it. I can check the call for that, if you give me a second. You can render just the content of it, just render the content of that. And prep, exactly. You will see what you'll get and then you can write your own --

JASON LENGSTORF: You're right, you're right. Okay.

SAMUEL SNOPKO: Rename that, please, because you call it feature. Change that.

JASON LENGSTORF: Yeah, yeah, LWJComponent, got to export that, as well. Oops. And then we got to go into our page component index, and then I need to here's a question, what does it name --

SAMUEL SNOPKO: Go different schema, please. There's a technical name. On the ton, and, yeah, technical name on the top.

JASON LENGSTORF: I can just leave this.

SAMUEL SNOPKO: Yeah, you did it correctly.

JASON LENGSTORF: Drop this in, then this. I need to import. I'm the next guy, the view guy. But this looks good to me.

SAMUEL SNOPKO: You didn't save it.

JASON LENGSTORF: Oh, I broke it. Objects are not a valid React child. I need to stringify this, I bet.

SAMUEL SNOPKO: Yep. Okay, there it is.

JASON LENGSTORF: Okay, so, now we have bloks, like a rich text block. So, sort of AST-ish definition, or content definition here. We have a block, paragraph. Holy buckets, did that just work?

SAMUEL SNOPKO: We have multiple renderer already. There is a Storyblok rich text renderer by one of our ambassadors who did it. So, you could just install it. And use it.

JASON LENGSTORF: This one?

SAMUEL SNOPKO: Exactly. So, if you would use this one, it should work.

JASON LENGSTORF: All right. So, let's get that installed in here. Where is it? Where are my packages? I always forget how this works.

SAMUEL SNOPKO: To be honest, I use the GitHub for that, they install it. I don't know where is the console now.

JASON LENGSTORF: Got to be in here. Oh, here, dependencies. Add dependency. Storyblok.

SAMUEL SNOPKO: Cool, I will learn something new also.

JASON LENGSTORF: Got the renderer. So, then I need to look at how it works. So, I -- usage, here we go. So, I pull in render from the renderer. I'm going to do that up here. Then let me make this a little bit smaller, so we can actually see what's going on here. Then once I have my render, I'm going to use it by rendering our document. So, I can, instead of doing this, make this blok body as my assumption, make this a div instead of a pre-tag, and I believe --

SAMUEL SNOPKO: Looks valid to me. So, let's add some actual text here. I'm going to make this into an H3. And then we can -- so, I think this one, I'm guessing there's no styles applied for headers. That's fine. But this is slick, looking exactly like what we would expect. If we inspect the --

JASON LENGSTORF: So, there we go. Here's our H3, we've got a paragraph with some bold text in it. There, all right. So, we've got rich text editing, and that took us -- that was pretty quick. I like that.

SAMUEL SNOPKO: Yep. And you can, of course, make more powerful, so you can use the components, so you already used, but you can use it inside the rich text editor, for example.

JASON LENGSTORF: Really, okay. So, if I go here, and I go to add blok, all right, I'm going to add a blok, put in a teaser, and in my teaser --

SAMUEL SNOPKO: I don't think so it will render by default.

JASON LENGSTORF: Okay, Storyblok rich text bloks.

SAMUEL SNOPKO: No, no, exactly, advanced usage.

JASON LENGSTORF: Blok resolvers.

SAMUEL SNOPKO: Exactly.

JASON LENGSTORF: And for a -- oh, oh, oh! I understand what's happening. Okay. So, for these then, I would want my default blok resolver -- how would this work? Are we getting buried?

SAMUEL SNOPKO: It's fun.

JASON LENGSTORF: Cassidy is here. I didn't even have to look to know it's Cassidy. Hello, hello. Chaos. Okay. So, all right. If we're in here then, what we can do up at the top is we can say, if I have a function -- no, how do I want to do this? I've got my render, right?

SAMUEL SNOPKO: To be honest, I didn't try it. You're more experienced than me.

JASON LENGSTORF: Okay, I can throw a default blok in here, and that's going to get the name. And the name was -- yeah, the name was the type of the thing. And then, okay, so then what we could do is we can just respond with any code, but what I think we can do here is I think we can go into the way that it's done in page here, and we can import --

SAMUEL SNOPKO: The index?

JASON LENGSTORF: Yeah, thinking we can import component. Maybe? Let's see how this works.

SAMUEL SNOPKO: It's like -- go up one sample up. Go back to the top of the rich text, and then go this one. Just send the props -- this is the my component, my component from my component/component. What you are sending. So, basically the same thing that we did with the index.

JASON LENGSTORF: Okay, so, you would get the blok -- no, that's not right. It would be props. So, we're doing component and then props?

SAMUEL SNOPKO: Not default blok resolvers. It's blok resolvers. So, what is the code from --

JASON LENGSTORF: Wouldn't we want -- instead of having to set each one, though, I think we would be able to --

SAMUEL SNOPKO: Okay.

JASON LENGSTORF: I don't know, let's find out. Let's see what it does when we try it.

SAMUEL SNOPKO: Do one first, then the dynamic one. You didn't save it still in Storyblok.

JASON LENGSTORF: Didn't save it in Storyblok, that is true. Cannot read property component of undefined. So, the props that we get out of the rich text don't line up the way we want them to, which means we're going to have to do these specifically, so we need a -- what did we use, the feature? Teaser. Teaser is a teaser component, or I guess I can do a component teaser.

SAMUEL SNOPKO: You can import the teaser.

JASON LENGSTORF: I'm trying to abstract this too much here. Let's get teaser instead from teaser. Then for a teaser component.

SAMUEL SNOPKO: You want to do props teaser, send props. And another thing the properties, blok resolvers, you're missing one.

JASON LENGSTORF: Blok resolvers, got it, okay. So, I'm going to do this. And this was -- okay. I need to nest it one level deep here. Okay, so, theoretically speaking, did that work?

JASON LENGSTORF: Okay, what I think is happening is it doesn't like -- there's a level of nesting that we don't have. So, what I'm going to do for now is I'm going to try this instead. We're going to take our teaser with our props, and we're just going to stringify it and see what's in there.

SAMUEL SNOPKO: Yep.

JASON LENGSTORF: Okay, saving that. We should get --

SAMUEL SNOPKO: Can you save it and reload?

JASON LENGSTORF: Then we get a UID and headline. Good. Then what I need for teaser -- we're getting blok.headline. So, I think what I need to do is create like a blok and then pass in the headline, which we can do. So, I will do a teaser, and then the blok will equal -- I think we can pass in props and that should do it. Then I can get rid of this one for now, keep it just in case. Hey! Look at it go. And now we've got content. This is pretty slick.

Ah, behold, my bucket!

SAMUEL SNOPKO: Very nice, very nice, very nice.

JASON LENGSTORF: Okay. This is pretty exciting. I am definitely pretty excited here.

SAMUEL SNOPKO: Different turn as I expected. Literally like one or two times with rich text editor, so it is new lesson for me also.

JASON LENGSTORF: Yeah. It's cool, too, because if I drag this around --

SAMUEL SNOPKO: Old, sorry.

JASON LENGSTORF: That was expected, that's fine. We can leave that be. This is great. I can definitely see some power in this and some flexibility here, because especially as I'm thinking about use cases, you know, as a content editor, we can't be super prescriptive, like not everything is going to be a blok. A lot of stuff is just text, and I'm going to be thrown in chaos, but being able to have almost like drop-in components that are a little more structured, so I need a callout box, or I want to put in like a structured image figure that has a caption, a credit, and stuff like that. Being able to do those sorts of things using blok, so we don't have to do a ton of custom coding, it makes it really nice.

SAMUEL SNOPKO: I have a great example, create a new space, demo space, because now you know the basics. You know how you would continue. So, there's not a lot of -- there is a lot of stuff to explain, but you can create a new space and create a demo. You will see, basically, how powerful is it, the whole approach.

JASON LENGSTORF: All right, so --

SAMUEL SNOPKO: I would love to underline how to build this demo, only one way how you can build it. So, it's not necessary to build it all the time like this.

JASON LENGSTORF: Okay.

SAMUEL SNOPKO: And you will see why. Yep. So, this is the demo page.

JASON LENGSTORF: Yeah, we have all sorts of stuff in here. We have buttons, we have social icons.

SAMUEL SNOPKO: Yep. And there's little problem with this. If you look at the call to action, or if you -- the call to action, there is too much input possibilities. And even the styles there, there's a top style on the top, which you can create these tabs. So here you can change the styling, if you want to. This is exactly your source code, your next.js, PHP, or whatever it is, it's rendering the stuff. You click on the bottom, click on the button please.

JASON LENGSTORF: Which one, sorry?

SAMUEL SNOPKO: Call to action, under the headline. Sorry, in the visual preview on the left side. Left with mouse, brown, there's a blue button, call to action. Also this one, just click on it. And now you can go to scroll down, and there's styles of the button. So, you can change to white, empty, whatever you want.

JASON LENGSTORF: Okay, I got you.

SAMUEL SNOPKO: Add shadow, change it. And this is the possibilities, all you can set up for your content editor, so they can play with it. This, on the components level, you can create a lot of combinations. And if you look now on the call to action, open the call to action. You have here general styles, images, three tabs, and every tab there is tons of setup. And this is pretty complicated. So, if you go from scratch, so go to page level, please. No, no, no, stay here, stay here. Go to the highest level of the components, in the components. Add a new blok. So, instead of creating the empty call to action, also with idea to have a preset. So, when you have a call to action and you can create all these versions with content, basically, if you click, you have the component like this and you would change only the stuff you need.

JASON LENGSTORF: This is really slick, yeah. Two columns, good.

SAMUEL SNOPKO: And this is how to build the demo, of course.

JASON LENGSTORF: This is cool. The way this is set up, though, it's putting us in a position to, like, as we have new demands for the way we would put together, say, marketing landing pages, we can set up bloks, and as the needs evolve, create new types of bloks, but those add to the library. So, over time, the marketing team, they get more and more options, and that library grows, so they have fewer and fewer things that they need to ask for active development time. They get more and more empowered without getting outside of the structure or anything. Hello, Luke, thank you for the sub. Yeah, I get it. This is -- I can see the power of this approach, is we're setting people up to kind of co-author things, where you're not blocked as a content editor if the front end has been built. You can kind of see things at least in a data structure, and you're not blocked on the front end, because the front end can be built kind of in tandem. So, you know, you can hard code things, and once you're ready, you wrap it in the SBEditable, or the hook, and say, you know, hook this up to Storyblok, and it will just go from there. So, this is really -- I get it. I can definitely see the power of this approach. I like that.

SAMUEL SNOPKO: You can do this with the pages. So, if you want to create a new page in the demo. So, leave the page, or the story. The content, how it looks. Here you can create a JSON page.

JASON LENGSTORF: We could nest it, but we won't.

SAMUEL SNOPKO: Exactly. And if you check the presets, content types, create it for the space, of course. Or defined. And in the presets, there should be a home page. So, click the home page. And then, yeah, also for articles also presets.

JASON LENGSTORF: Nice, okay.

SAMUEL SNOPKO: Save. And you should get basically your homepage.

JASON LENGSTORF: Nice.

SAMUEL SNOPKO: Looks like there is some kind of back, but didn't expect that.

JASON LENGSTORF: Yeah.

SAMUEL SNOPKO: Probably need to remove the header. Fake header.

JASON LENGSTORF: The great thing about it is, oh, cool, solved it.

SAMUEL SNOPKO: Exactly.

JASON LENGSTORF: Like I do think that's a really nice kind of takeaway here, where we can do this sort of stuff so quickly, like right on the fly. Oh, nice, and this is going to take me to another section. It will take me out to the footer. This will take me out to, I assume, out to the Nav, but then I've got all these pieces in the middle that I can use. That's slick. What did I just change here? I actually navigated on my site, didn't I?

SAMUEL SNOPKO: Yeah, in the visual editor, you have to preview events, if you don't want to use the links. Some people want, some don't. It's up to you. If we are inside the editor, just forbid that. Yeah. There's like, what is more interesting is check the URL. So, here the URL already, if you see, this is created for you. And we have here, you just created that, so did you hit the save already?

JASON LENGSTORF: I didn't, but I can.

SAMUEL SNOPKO: Hit the save, and you see the button next to the save on the left side, that arrow, preview in the new window. This will open your draft content with a unique, how it's called, not props.

JASON LENGSTORF: Query string?

SAMUEL SNOPKO: Yeah, or parameters, and you can send to anybody, and they will see the draft of the website.

JASON LENGSTORF: Oh, slick, okay. So, I can show -- like I'm working on something, I have my draft, using Storyblok I can build a kind of unique pre-URL. That's cool. What I like about that is that it helps solve the problem from both ends. Because if you're a developer, it makes sense to use something like Netlify's got the deploy previews. Open up a request and I can see the work in progress at a unique URL that's shareable, but it's not live. For content, that makes sense, but you have to rebuild the site for each preview of the content, and it's like how would you do that between different users, because the site code isn't changing, it's the content changing. So, it gets complicated. So, you solve that in a really clever way, where you're basically allowing us to open up the site, and this query string, I assume, is like identifying stuff that the Storyblok editable picks up?

SAMUEL SNOPKO: Yep, exactly. Exactly. And this is something, like usually from my setup, or my personal website, I usually have a Netlify, where it's my production, and I have also one Netlify project where it's only running the development. And in the production, I have a statically built website, and in the development, I have a website that is basically in the lockdown host, like the dev mode, or how it's called. So, the same thing what you run in the lockout host, and that's something that from a draft content, that you can preview in the live. And then if I'm only a developer, I work in my lockout host and I have the lockout host and see in the visual period also the lockout host.

JASON LENGSTORF: That's really nice. I love this setup. I think it's got some very, very powerful features. I can see, you know, the content preview, just the ability that you get as a developer when you move to the Jamstack is super powerful, but comes with this tradeoff that content editors miss, which is the monolithic, you know, you work in something that's got the versioning and the instant previews and stuff. So, Storyblok is solving that. You're getting the version history, you're getting the multi-content, you're getting the instant previews. So, that's all very powerful stuff. Super excited about it. Cool, so, what else should we look at here? Are there any other features that we should show off?

SAMUEL SNOPKO: Definitely. If we should, and we have a little bit more time, then go to Storyblok, and we have a powerful way to extend Storyblok. So, even we are a SaaS, which is there is mid, the English word, that you cannot extent the SaaS services -- sorry, software as a service, but you can create your own section in Storyblok. So, you go to Storyblok application story, just very quickly.

JASON LENGSTORF: Where?

SAMUEL SNOPKO: Log in. Go back, yeah, and there's app store. I want to point out, you can already, for example, there is a cloud, and basic stuff you can install, but you can create your own. We have authentication service, and you can run your own stuff. So, for example, if you want to see deploys, deployment from the Netlify in the Storyblok, you can very easily create your own app, or we are already building that. So, you don't have to build this one. That should come soon. If you install the activities, so go, please, to the all and find the activities. The apps, on the top. Activities, one down, exactly. Just hit the install, please. On the left side. And then it was added on the left menu on the bottom. And now you see all the activities of what's happening in the Storyblok, and you can create application like this as you want, because we have also the management API. And everything what we did today is also possible to do using the CLI and the management API, basically. So, you can build your own stuff, and we have customers who basically build their own CLI, where they just create, hey, I want to create a new component with these properties, and it will create a new component in their next code, also in the Storyblok, and push everything, and it's like a matter of seconds.

JASON LENGSTORF: Nice.

SAMUEL SNOPKO: And you can create custom field types and stuff like that, and the tools. A lot of ways to explore, also to connect with the e-commerce solutions we have already, and the e-commerce plug-ins. So, it's working great with the next commerce or view storefront.

JASON LENGSTORF: Yeah, yeah, yeah. Very cool.

SAMUEL SNOPKO: So, yeah. I'm a big fan. I'm working for Storyblok, but still I am a big fan.

JASON LENGSTORF: Yeah, no, it's clearly there's a lot that can be done here. I'm always excited to hear about CLIs and kind of APIs and stuff. If I want to learn about those, I go --

SAMUEL SNOPKO: Everything is in resources right now.

JASON LENGSTORF: Resources, APIs.

SAMUEL SNOPKO: Exactly.

JASON LENGSTORF: Cool. Here's where you would learn about those. We'll drop those in the chat if you want to check it out. So, there's a question in the chat about the JavaScript bridge. So, when you deploy to production, is that code loaded, or is that, like -- like the editable stuff, is that kind of stripped away in production?

SAMUEL SNOPKO: No, that's why we have a draft version and published version. The JSON, the draft version is added a special stuff for that connection, and the published version is basically cleaned up code and there's only the necessary stuff. And it's also --

JASON LENGSTORF: Oh, oh, there's a lot. Let's look at one that's simpler. I'm going to go to this other space that we created. And my first space, look at content, here's my homepage. I'm going to look at the draft content.

SAMUEL SNOPKO: If you look inside, literally, the edit table should be a few times.

JASON LENGSTORF: Yeah, yeah, so we can see that, here's the editable stuff. Now let me publish it. And let's look at the published, and I can already see that it's smaller, and we lost a bunch of that extra content. So, effectively, in published content, the Storyblok JavaScript is doing a lot less work.

SAMUEL SNOPKO: We are also, the setup for our side is CDNs and our integration, Storyblok integration -- sorry, the package also has some kind of caching already inside.

JASON LENGSTORF: Okay, great. Cool. And then Tony asked is Storyblok boot strapped, or do you all have a VC backing?

SAMUEL SNOPKO: I wanted to also answer that. We were a steady company until the end of the last year, when we got the seed round, and this February was the -- beginning of February, we announced the first round. So, basically, we have two VCs, multiple VCs at the moment, but still fully in the control of our founders, and on the best way to make it bigger and better.

JASON LENGSTORF: Nice. Well, I mean, you're working on some cool stuff. Congratulations on getting some funding, and I think --

SAMUEL SNOPKO: I think there's an article about that also.

JASON LENGSTORF: Yeah, yeah, drop that in the chat. We can include it. All right. So, I think -- I mean, I feel like we've gotten -- it's always good news when we're ahead of schedule, right? I think we were able to set up a space, able to set up a site, we were able to kind of try things out. And, actually, looking at this now, because I published this, I should be able to when I reload the page, see all this new content. Look at that great stuff. So, how cool is it that all just works? Yeah, it's really, really slick that's all doing what we want. You know, this is some pretty powerful stuff. So, I think -- let me grab this link, so I don't lose it, make sure it shows up in the show notes. Here is that. There you go. Series A, always cool to get a series A. So, Samuel, where should somebody go if they want to learn more about Storyblok? Where do you recommend somebody goes if they want to start their own journey here?

SAMUEL SNOPKO: Just send the link. I'm super proud -- so, to start, go for resources always. And getting started, which we did together, is a great start, definitely. And then if you check all the technology hubs. So, if you go to technologies, we have these three really detailed technologies. If you open the next.js, which I'm super proud, I'm big ambassador of it. On the top, first three are getting started, create a multi-language website, and the Nuxt module, everything you need. So, tons of materials, next, Storyblok, advanced topics, literally how to do shops, and this is a seven-part blok. So, a blok from a friend of mine, and he built together this seven-part tutorial to build your own VueDose blog. So, you can go and copy/paste it. Then on the bottom, there's also expert topics. So, a lot of stuff, as you can see.

JASON LENGSTORF: Building apps, dynamic forms.

SAMUEL SNOPKO: And then also if you want to check what is built with Storyblok, a lot of stuff. A demo project, of course, a cheat sheet, and, yeah, how to build it with big commerce. So, these kind of we have for Nuxt, Next, and Gatsby, and we have a Discord. If you go back to the technologies, go back in the browser, please. Yep. And scroll down under these three. So, there are all other technologies we have, at least five-minute articles how to integrate it. But if you checked the content management editor, content delivery API, there's also source codes in different languages, how you can integrate it, et cetera. So, to API. Go to content delivery, and there you see on the top right tabs, JavaScript, Ruby, PHP, Swift, Python. So, depends on your technology, and if you're missing something or something is unclear, you can always go to Discord, which is always in the menu, you'll find the link, and you can chat to me or any of my colleagues.

JASON LENGSTORF: Very cool, yeah.

SAMUEL SNOPKO: I think that's it.

JASON LENGSTORF: This is some really cool stuff. So, if somebody wants to go and find more about you, I'm going to drop your Twitter again into the chat. Chat, make sure you're doing that follow. Where else should somebody go if they want to learn more about you?

SAMUEL SNOPKO: I have a website, super old, there is nothing. So, the best thing is the Twitter. Go to Twitter. Yeah, this is my website. You can see, I did it time before I joined Storyblok.

JASON LENGSTORF: I like it.

SAMUEL SNOPKO: Yeah, this is only HTML, pure CSS. Didn't have time.

JASON LENGSTORF: Yeah. No, I think this is great. Yeah, so, I think with that being said, I think what I'm going to do is do one more shout-out. We've had Ashly with us all day doing live captioning. Thank you so much, Ashly, for doing that. She's with White Coat Captioning. Jamstack. But, yeah, so, we've had the White Coat Captioning here all day. Thank you again. And that's made possible by our sponsors, Netlify, Fauna, Auth0, and Hasura, all here to make this show more accessible to more people, which I very much appreciate. Samuel, any parting words before we call this one done?

SAMUEL SNOPKO: Yeah, one more thing I forgot. This is like we will have an event. If you want to check the Storyblok -- we have an event.

JASON LENGSTORF: Ah, behold!

SAMUEL SNOPKO: It's a Storyblok event, Stories from the Blok. So, yeah, that's exactly. Thank you.

JASON LENGSTORF: Right at the top. Everybody go check that out if you want to learn more. Yeah, this is -- I like these, the road map meetups, always fun, that's coming up in a few weeks. So, go sign up for that, y'all. Cool, well, with that, I think, chat, Samuel, I think we're going to call this one done. This was great. Super excited about Storyblok. Looks like you're doing some cool stuff over there, can't wait to see what you do next. Chat, as always, stay tuned. We're going to find somebody to raid. We will see you next time.

SAMUEL SNOPKO: Thank you very much. Have a nice day, or evening, or whatever it is now.