wurd-web

Browser Javascript client for the Wurd CMS

Wurd is a service that lets you integrate a CMS into any website or app in minutes. This client makes it easy to load content into the browser for client-side applications.

If you're using React, check out wurd-react as it includes easy to use components for setting up editors and content at once.

If rendering on the server, use the API or wurd-node.

Example

import wurd from 'wurd-web';
import { marked } from 'marked';

wurd.connect('myApp', {
  editMode: true,
  markdown: marked, // Optional to enable markdown parsing
});

wurd.load('homepage,shared')
  .then(content => {
    //Use getters for accessing content
    content.text('homepage.title'); // 'Hello world'

    // Use blocks for accessing subsections of content
    var page = content.block('homepage');

    page.text('title'); // 'Hello world'

    page.map('team', item => {
      item.text('name'); // 'John Smith'
    });
  });

See more in the examples folder or run them with npm run example.

Installation

Using NPM:

npm install wurd-web

Directly in the browser:

<script src="https://unpkg.com/wurd-web/dist/wurd.min.js"></script>

Usage

• Create a Wurd account and app.
• Connect to a Wurd app with wurd.connect('appName', {editMode: true}).
• Load top level 'sections' of content you'll be using with wurd.load('section').
• In your views/templates etc., get content with wurd.get('section.item').
• To make regions editable, simply add the data-wurd attributes to the HTML. For example (using Mustache style template tags):

<h1 data-wurd="homepage.title">{{wurd.get('homepage.title')}}</h1>