# Installing Declarativas in Your Application

## Installing

You can use nodejs and npm to grab the latest copy of declarativas to get going in seconds.

#### With npm or yarn

Open up your terminal, and do the usual:

```bash
$ npm install --save declarativas
# OR
$ yarn add declarativas
```

And bring it in your code:

{% code title="index.js" %}

```javascript
import { render, createElement as c, ClearCanvas, Properties, StrokeRect } from 'declarativas';

// Get your canvas from an HTML file.
const canvas = document.querySelector('canvas');

render(
  [
    c(ClearCanvas),
    c(Properties, { strokeStyle: 'black' }),
    c(StrokeRect, {
      x: 100,
      y: 100,
      w: 20,
      h: 20,
    })
  ]),
  canvas.getContext('2d'),
);
```

{% endcode %}

#### With a CDN

{% code title="index.html" %}

```markup
<!doctype html>
<html>
<body>
  <canvas></canvas>
  <!-- CDN Import -->
  <script type="javascript" src="https://unpkg.com/declarativas"></script>
  
  <!-- Code -->
  <script type="javascript">
    const { render, createElement as c, ClearCanvas, Properties, StrokeRect } = window.declarativas;
    const canvas = document.querySelector('canvas');

    render(
      [
        c(ClearCanvas),
        c(Properties, { strokeStyle: 'black' }),
        c(StrokeRect, {
          x: 100,
          y: 100,
          w: 20,
          h: 20,
        })
      ]),
      canvas.getContext('2d'),
    );
    
  </script>
</body>
</html>
```

{% endcode %}
