How to use Codity playground

Please make sure you have signed up for the service to get the most out of it!

"Codity playground is an online playground for web designers and web developers who want to create amazing prototypes, user interfaces and web pages with realtime output that can be shared. A way to be inspired and to get others inspired as well.
With it's extensive list of processors and funationalities, it's a great place to host and play with your web prototypes and codes."


Codity supports HTML, CSS and JAVASCRIPT. For each of these technologies, Codity provides an editor pane. For each of these technologies there are variety of preprocessors and extension languages that enable this tool to be a fully fledged online, realtime playground for web designers and web developers.

Apart from the technologies, editors can be resized using vertical and horizontal splitters to give more room for a specific editor and view.

Each editor pane has 2 clickable action buttons as shown in the picture below. The arrow to the left of the editor name is a contextual menu that changes depending on whether you have used a preprocessor or not. By default (without any preprocessor selected), It lets you format and clean up your code. The other clickable which is represented by a gear icon is where you can select preprocessors, add extra libraries and put some settings in place for your code.


When you are writing code in the HTML pane, you do not need to enter the full html code but rather only the content of the body. We provide them at the time of rendering the results to the output.

For HTML, there are 2 preprocessors supported. Pug and Haml. Pug used to be called Jade so for those of you who did not know the name change happened, here it is. As mentioned in the previous section By clicking on the Gear icon on the top right of HTML editor pane, You get to select which preprocessor you want to code in.

After you selected the preprocessor you want to use, you simply click on save settings and then close, to get back to the editor and write your code. Now if you remember we had a clickable Icon on the left side of the HTML title of the pane. If clicked the menu will let you compile your PUG or HAML code to see how exactly the final html looks like. If you select that option, an orange label will show up on the HTML pane's title saying the now it's a compiled version and therefore is not editable. You can use the same menu to get back to original PUG or HAML code.


We support a variety of CSS preprocessors including SCSS, LESS, SASS and STYLUS. When you click the gear icon, you not only can choose preprocessors if needed, but also include css Normalise and Reset to reset all your elements to some defaults.
You can also choose to include Autoprefixer. What this does is that the output css styles that is generated is getting prefixed so that they work on all the browsers. Lastly, you can include external css libraries either by selecting some defaults that we included in the editor or click on "Add more Libraries" button to include yours. You can also drag the included external stylesheets to reorder them.


Finally, we do support Babel and Typescript for the javascript editor. You can choose them if needed by clicking on the gear icon on top right corner of this pane.