Ace

  1. Home
  2. Editors
  3. Ace
Bootstrap CardsButtons Extended

Ace matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.

Basic Editor with Javascript & HTML

1
2
/**
* In fact, you're looking at ACE right now. Go ahead and play with it!
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<html>
<head>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Auto Resize & Keyboard Shortcuts

Get all keyboard shortcut options from here

Auto Resize

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Keyboard Shortcuts

1
2
<html>
<head>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS & SASS Editor

CSS Editor

1
2
body {
overflow: hidden;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

SASS

1
2
// sass ace mode;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

JSON & PHP Editor

JSON Editor

1
2
{"widget": {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

PHP Code Editor

1
2
<?php
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Theme Customizer

Customize & Preview in Real Time

Menu Color Options
Layout Options
Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now