---
tags: SimplyEdit for Developers
---
# The smallest app

To create a complete web application with SimplyEdit, you will probably also want to include [SimplyView](https://github.com/SimplyEdit/SimplyView). SimplyView is a set of libraries that help build web apps. We created these specifically to work well with SimplyEdit.

## The framework

<script src="//cdn.simplyedit.io/1/simply-edit.js"></script>
<script src="//unpkg.com/simplyview@2.0.2/dist/simply.everything.js"></script><script>

This loads both SimplyEdit and SimplyView. You can also load specific components of SimplyView, instead of everything at once.

Now add the application shell, or the HTML structure of your application. In this example we'll create an input with a (+) and a (-) button, which will increase or decrease the value in the input:

<div id="counterApp">
	<input type="text" data-simply-field="counter">
	<button data-simply-command="add1">+</button>
	<button data-simply-command="sub1">-</button>
</div>

The text input has a SimplyEdit field called `counter`. This field works like any other SimplyEdit field.
The buttons are standard HTML `<button>` tags. But additionally we've added the attribute `data-simply-command` attribute.

If you've written Javascript before, you probably have written code like this:

<button id="addButton">+</button>

<script>
    document.getElementById('addButton')
    .addEventListener('click', function(evt) {
        myApp.addStuff();
    });
</script>

While this works, there are a number of problems.

First, if for some reason the addButton is removed from the DOM and then inserted again, your code no longer works. You must re-initialize the event listener.

And if you have two buttons that do the same thing, you must add the same code twice. Once for each button.

Instead you can just create a SimplyView App, like this:

<script>
	var counterApp = simply.app({
		container: document.getElementById('counterApp'),
		commands: {
			add1: function() {
				counterApp.view.counter++;
			},
			sub1: function() {
				counterApp.view.counter--;
			}
		},
		view: {
			counter: 1
		}
	});
</script>

And now any button with the `data-simply-command="add1"` attribute will trigger the `add1` function in the counterApp whenever it is pressed. Or clicked. SimplyView will automatically call your method for any html element with this command attribute, no matter when it was inserted in the DOM.

This is the power of declarative programming and you will see a lot more of it further on.