For new users give them the ability to select a template file (or real world example)

[boyney123]

Reason/Context

The studio is now hosted on the internet which is great!

People will be coming to this from all over, and I wonder if it would be a nice feature for them to select a template or real-world example before they go into the studio.

I made a video to explain what I mean and also how it would kinda work (https://asyncapi.slack.com/files/U020GN9C6FM/F02KDGTE1L2/studioexamples.mp4)

Screenshot

When will it be shown

• When users come new to the studio
• When users come from the web (maybe).

Why we need this?

I just think it would give users the ability to explore AsyncAPI more, rather than be thrown a default template on load.

[anandsunderraman]

@boyney123 completely agree. We need to breakdown the barrier to adopt the specification rather than being bogged down by its details.
A starter template is great starting point for people to explore and understand the spec

I was also motivated by this problem and hence submitted a hackathon submission / proposal for this problem asyncapi/community#136

[boyney123]

Thinking about this a bit more, what do you think of a new route @magicmatatjahu @derberg ?

For example studio.asyncapi.com/new

I guess then:

• From things like the website we could use the /new route
• On the app itself, we could allow users to create a new file (which directs to /new).

Also if it's on /new we might be able to give the UI abit more, as it wont have to fit in the modal

[boyney123]

This is a mockup of how the /new route could look

Selecting a template will open up studio as usual with the selected AsyncAPI file

[boyney123]

Started to spike this solution, and this is kinda how it would work

• new route on /new
• project holds examples directory with example yml files
• YML files are loaded onto this page

Flow

• User comes to /new
• User selects one template they would like to see
• That template is set (at the moment in local storage)
• The Studio loads with selected template

Video of working solution 👇

https://asyncapi.slack.com/files/U020GN9C6FM/F02KJM65N66/welcometostudio.mp4

---

@magicmatatjahu what do you think? This would introduce React router into the studio with a new page and also some code that allows us to read raw file (raw-loader from webpack) to read the yml files.

[magicmatatjahu]

and also some code that allows us to read raw file (raw-loader from webpack) to read the yml files.

How did you do that? Did you eject cra config for webpack?

What I wonder most is whether we actually need a /new path (and router). If we really need paths then maybe we should go in the direction of slide-over like in TailwindCSS (https://tailwindui.com/components/application-ui/overlays/slide-overs) rather than a new page and then combine slide-over with the new path in the sense that the user has the new path in the browser url but sees the editor and sidebar which are dimmed, like in a modal - very similar solution to Instagram when you open some picture, then browser url has changed but you still see another pictures but in background. @boyney123 What do you think?

Btw. awesome implementation :) I very like it, but yeah, we should discuss in which direction we should go:

• new path with new pages
• new path but with modal content (like in image in PR's description)
• new path but with content on slide-overs

what we approve now we will have to do similarly in the future :)

[boyney123]

How did you do that? Did you eject cra config for webpack?

I'm using react-app-rewired which allows you to keep everything as is and extend the configs etc, only other option is to eject as you said.... create-react-app is quite locked down like that

What I wonder most is whether we actually need a /new path (and router). If we really need paths then maybe we should go in the direction of slide-over like in TailwindCSS (tailwindui.com/components/application-ui/overlays/slide-overs) rather than a new page and then combine slide-over with the new path in the sense that the user has the new path in the browser url but sees the editor and sidebar which are dimmed, like in a modal - very similar solution to Instagram when you open some picture, then browser url has changed but you still see another pictures but in background

Yeah hard to tell really, only reason for the new page is to keep some kind of flow for example:

1. Pick your protocol / example to see
2. Load the editor

I worry about too much going on, if the editor is in background with slideover etc, but happy to try it too.

Btw. awesome implementation :) I very like it, but yeah, we should discuss in which direction we should go:

Yeah definitely, I'm going to raise what I have done as a draft PR (hopefully get a preview link with that), and also quickly work on the VSCode page you had the idea for (with a draft PR) and I will bring it back to the community with some options to see where we head / decide.

What do you think?

[magicmatatjahu]

Implemented by #158 and #201

@boyney123 If you think that we should leave it open, please write why and of course reopen it :)