Basic Editor with Javascript & HTML

/** * In fact, you're looking at ACE right now. Go ahead and play with it! * * We are currently showing off the JavaScript mode. ACE has support for 45 * language modes and 24 color themes! */ function add(x, y) { var resultString = "Hello, ACE! The result of your math is: "; var result = x + y; return resultString + result; } var addResult = add(3, 2); console.log(addResult);
<html> <head> <title>Demo</title> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul> <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li> <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li> <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li> <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li> <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li> </ul> </nav> </body> </html>

Auto Resize & Keyboard Shortcuts

Get all keyboard shortcut options from here

Auto Resize

<html> <head> <title>Demo</title> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul> <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li> <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li> <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li> <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li> <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li> </ul> </nav> </body> </html>

Keyboard Shortcuts

<html> <head> <title>Demo</title> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul> <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li> <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li> <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li> <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li> <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li> </ul> </nav> </body> </html>

CSS & SASS Editor

CSS Editor

body { overflow: hidden; } #editor { margin: 0; position: absolute; top: 0; bottom: 20px; left: 0; right: 0; } #statusBar { margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background-color: rgb(245, 245, 245); color: gray; } .ace_status-indicator { color: gray; position: absolute; right: 0; border-left: 1px solid; }

SASS

// sass ace mode; @import url(http://fonts.googleapis.com/css?family=Ace:700) html, body :background-color #ace text-align: center height: 100% .toggle $size: 14px :background url(http://subtlepatterns.com/patterns/dark_stripes.png) border-radius: 8px height: $size &:before $radius: $size * 0.845 $glow: $size * 0.125 box-shadow: 0 0 $glow $glow / 2 #fff border-radius: $radius &:active ~ .button box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4) ~ .tag font-size: 40px color: rgba(0,0,0,0.45) &:checked ~ .button box-shadow: 0 15px 25px -4px #ace ~ .tag font-size: 40px color: #c9c9c9

JSON & PHP Editor

JSON Editor

{"widget": { "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center", "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" } }}

PHP Code Editor

<?php $referenceTable = array(); $referenceTable['val1'] = array(1, 2); $referenceTable['val2'] = 3; $referenceTable['val3'] = array(4, 5); $testArray = array(); $testArray = array_merge($testArray, $referenceTable['val1']); var_dump($testArray); $testArray = array_merge($testArray, $referenceTable['val2']); var_dump($testArray); $testArray = array_merge($testArray, $referenceTable['val3']); var_dump($testArray); ?>

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now