Instant Code Preview with Cypher Studio 🚀

Good morning everybody.

My name is Suraj Vishwakarma and let me introduce my project called Cypher Studio.

It is.

It is a browser based react code editor that let you see your code in action instantly.

The key main features of this project that I have used is as you can see in the right hand side there is an instant preview of the code in the code editor as you can see in the left hand side there is a file systems which I have built for managing all your files instantly.

And in the whole like the top bar as you can see there's an import and export button which allows you to.

Which allows to import the code which you have worked on the previously session.

As you can see you can export these codes.

So if you export it it will download the files in your download folder and there's a receipt but a receipt button which brings your code to the normal phone and like the boilerplate code you have written.

And there's a theme button which allows to choose the white themes or the dark themes as per your convenient and so let me give you a quick demo that how it works.

So basically As you see there's a reset button so I'll reset the project quickly and as you can see I have just resetted the projects and the instant preview is you can see in the actions.

So basically it has a hot loading things so it compiles and transpile very fast and so I have used Monaco editor here.

So as you can see there is a syntax editing and you can also see the code suggestion as for the react for the exam for example if you are typing some specific terms syntax for example for example use state use effects all the hook name it will be highlighted on the go.

Nice.

And now Let me import the project which I have exported right now.

So I'll go on the import and I'll select the import things import files the files which I have exported and as you can see I have as I have imported the project the instant preview is in the action and it has a quick hot load things and this is all the main problem while main problem I faced while building the project was building a preview was very unique things for me.

I have used Babel for transpiling the code instant code and providing the hot reloads also Let me show you something.

For example if I am removing this dias it will instantly hot reload the things and it will no preview it.

So this is all Thanks for watching this video go and try it out.

It's already hosted on cipherstudio.surajv.me Thank you.