This project has been deprecated. Consider using ApiaryUI instead.

Attributes Kit is a (as the name suggest) kit which helps you with rendering MSON (plain-text, human and machine readable, description format for describing data structures).

For instance—it turns the following...

- id: 1
- name: A green door
- price: 12.50
- tags: home, green

...into this.

Please see the list of supported features →

• Getting Started
• Usage
  • API
  • Browser
  • Server
• Developing
  • Installation
• Compatibility
• Status
• Versioning
• Contributing
• Troubleshooting
• Code of Conduct
• License

1. Clone the repository

git clone [email protected]:apiaryio/attributes-kit.git

2. Install dependencies

cd ./attributes-kit
npm install

3. Run it

npm start

You can go to localhost:8080 to try out the Playground, or to /examples.html to see the list of examples.

4. You're done! 👍

If you would like to use it in your application, please see the Usage section.

• Browser
• Server
• API

1. Install the package

npm install attributes-kit

2. Require the package

import AttributesKit from 'attributes-kit/dist/attributes-kit';

var AttributesKit = require('attributes-kit/dist/attributes-kit');

3. Use it

Use the Attributes Kit, you can see the API.

If you prefer to drop a <script> tag in your page, here's how to do it. Just a note—all builds do support UMD (AMD and CommonJS) out of the box.

1. Choose the build

Go to the [Releases](https://github.com/apiaryio/attributes-kit/releases) page and download the latest release, or you can download all the builds directly below.

2. Drop the <script> tag

<script src="./attributes-kit.js"></script>

3. Use it

var AttributesKit = window.AttributesKit;
AttributesKit.render(refractElement, element, options);

Please see the API.

There are two more builds mainly for more advanced use cases.

You can use the Attributes Kit on the server too. For instance—you can generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl you pages for SEO purposes.

1. Install the package

npm install attributes-kit

2. Require the package

Please mind the dist/attributes-kit-server suffix.

import AttributesKit from 'attributes-kit/dist/attributes-kit-server';

var AttributesKit = require('attributes-kit/dist/attributes-kit-server');

3. Use it

import React from 'react';
import ReactDomServer from 'react-dom/server'
import {Attributes} from 'attributes-kit/dist/attributes-kit-server';

const element = React.createElement(Attributes, {
  element: [Refract Element]
});

ReactDomServer.renderToString(element);

• render Method
• Class Instance
• React Component

import AttributesKit from 'attributes-kit/dist/attributes-kit';

AttributesKit.render(refractElement, element, options);

import AttributesKit from 'attributes-kit/dist/attributes-kit';

let attributes = new AttributesKit({element, options});
attributes.render(refractElement);

import ReactDom from 'react-dom';
import {Attributes} from 'attributes-kit/dist/attributes-kit';

ReactDom.render(<Attributes element={refractElement} />, element);

Attributes Kit always takes the same parameters.

1. Clone the repository

git clone [email protected]:apiaryio/attributes-kit.git

2. Install dependencies

cd ./attributes-kit
npm install

3. Run it

npm start

Congratulations! You are all set to start developing now! 🚀

Please see the STATUS.md file.

This repo is using semantic-release.

Please see the Contributions guidelines.

This project adheres to the Open Code of Conduct. By participating, you are expected to honor this code.

MIT.