```html

Next page >

```

### Contents

- [Installation and setup](#installation-and-setup)
- [Editing content](#editing-content)
- [Saving content](#saving-content)
- [Initializing with static content](#initializing-with-static-content)
- [Custom placeholders](#custom-placeholders)
- [Readonly](#readonly)
- [Contributing](#contributing)

### Resources

- [API reference][api]
- [Demo][demo]
- [License][license]

## Installation and setup

Install simpla-link with Bower (Yarn support coming soon)

```sh
$ bower i simpla-link --save
```

[Setup Simpla][simpla-setup] on your page, then import simpla-link into your ``

```html

```

Wrap the content you want to link with ``. Give each link a unique `path`, where it will store its data in your project

```html

Next page >

```

Simpla link plays nicely with other Simpla elements, so you can linkify editable content

```html

```

## Editing content

Edit a simpla-link by entering edit mode with Simpla (which makes all Simpla elements on a page editable) or setting the `editable` property directly on an element.

```js
// Enter edit mode
Simpla.editable(true);
```

```html

```

Entering edit mode with Simpla is the recommended way to edit links. It ensures all elements on a page remain in sync and updates Simpla's public `editable` state, which other elements may rely on.

## Saving content

Save a simpla-link by calling Simpla's `save()` method, which saves all modified content on the page. It returns a promise.

```js
// Save all modified Simpla content
Simpla.save();
```

> You must be authenticated with Simpla before saving content

## Initializing with static content

```html

Visit google

```

Initializing with static content is useful for converting existing links and buttons to Simpla links, or bootstrapping a project with predefined content. By setting `href` and then calling `Simpla.save()` you can easily set content directly to Simpla.

> Since static content is overwritten by remote data, you should not have a href set in production

## Custom placeholders

You can set a custom placeholder for the link input prompt with a `placeholder` attribute

```html

Next page >

```

## Readonly

Simpla-link has a `readonly` property that stops it from becoming editable, even if Simpla is in edit mode or you try to set `editable` on the element directly. This is useful for using simpla-link to purely consume and display content from Simpla's API.

```html

Next page >

```

## Contributing

If you find any issues with simpla-link please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.

***

MIT © [Simpla][simpla]

[simpla]: https://www.simpla.io
[simpla-setup]: https://www.simpla.io/docs/guides/get-started

[api]: https://www.webcomponents.org/element/simplaio/simpla-link/page/API.md
[demo]: https://www.webcomponents.org/element/simplaio/simpla-link/demo/demo/index.html
[license]: https://github.com/simplaio/simpla-link/blob/master/LICENSE

[bower-badge]: https://img.shields.io/bower/v/simpla-link.svg
[bowerlicense-badge]: https://img.shields.io/bower/l/simpla-link.svg
[travis-badge]: https://img.shields.io/travis/simplaio/simpla-link.svg
[travis-url]: https://travis-ci.org/simplaio/simpla-link
[size-badge]: https://badges.herokuapp.com/size/github/simplaio/simpla-link/master/simpla-link.html?gzip=true
[webcomponents-badge]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
[webcomponents-url]: https://www.webcomponents.org/element/simplaio/simpla-link