Building Applications Faster with OpenLaw: The Release of OpenLaw “Elements”

OpenLaw is a comprehensive set of tools and APIs helping to power an open commercial and financial system.

With OpenLaw, you can structure and manage commercial transactions, create and transfer tokens — all in a matter of minutes. Through OpenLaw’s various components we can reduce the amount of time needed to build blockchain based lending, securities, derivatives, and intellectual property transactions.

Several months ago we open sourced our API and portions of the OpenLaw virtual machine.

Today, we’re open sourcing a new set of tools called OpenLaw Elements. OpenLaw Elements is a React form component that will make it easier for you to incorporate OpenLaw into your app, internal system, or site.

Installation

Working with OpenLaw Elements is a snap. In a terminal, write the following command:

npm install — save openlaw-elements@beta

Usage

Once installed, you can use OpenLaw elements in a bundled app (e.g., using Webpack) or create-react-app. An example of how to incorporate Elements into your project is outlined below:

Styles

OpenLaw Elements comes with a separate file of base styles, which you can include in your app JS (via an import) or HTML.

If you decide to import the styles into your JS, be sure to add a way to import CSS into your bundle. As an example, using Webpack’s css-loader + style-loader. If you are using create-react-app this is already done for you.

To include the base styles add the following to your app’s imports (preferably once, and at a higher level in your component tree):

import ‘openlaw-elements/dist/openlaw-elements.min.css’;

If you’d like to load the styles via an HTML file, you can copy the path (or file):

<link
rel=”stylesheet”
type=”text/css”
href=”node_modules/openlaw-elements/dist/openlaw-elements.min.css”
<! — or your path →
>

If you would like to override our styles too, that’s completely OK. We’ve set up our components with simple classnames so you can target what you need to, easily. Just add your own stylesheet and take a look at what classes and elements you can style. We find the simplest way to prototype can be using browser developer tools.

Example Application

To bring this all together, it only takes a couple of minutes to start building a blockchain-based application with OpenLaw’s API and Elements.

If you’d like a hand in getting started, we have an example app (openlaw-elements/example) you can run. Clone the repository, install with npm and run the app with npm start.

In the example app we show how you could continuously update a compiled and executed OpenLaw template. The end product is a preview of the document in HTML. In the browser the user clicks “Preview” to update the result, but your app could easily do something more useful!

Our “Usage” section above (and in our repository) intentionally leaves out more complex behavior to simply illustrate the required dependencies in order to use <OpenLawForm /> correctly.

As we grow we’re constantly looking for ways to make our libraries easier and easier to use. Your feedback will help us! Start the conversation with a GitHub issue, or a feature request. We’re also available in our community Slack.

Run the example app

git clone git@github.com:openlawteam/openlaw-elements.git
cd openlaw-elements
npm install
npm start

// Now you can visit http://localhost:3001 and see the app running.

Note: if you would like to use our Address or input type, please authenticate by sending your OpenLaw login details to the npm start command:

OPENLAW_EMAIL=alex@email.com OPENLAW_PASSWORD=password npm start

If you do not provide credentials, the app will still run, but you will not be able to select an address lookup from the drop-down, nor be able to see the values in the rendered preview HTML.

Next Steps and Benefits

OpenLaw Elements allows for greater ease and flexibility when building blockchain-based applications and services. With OpenLaw Elements, you can speed up development and build time and easily create commercial relationships which incorporate smart contracts, tokens, and blockchain technology — all in a legally compliant way.

If you’re interested in learning more about OpenLaw, check out our site and documentation for an overview and detailed reference guide. You can also find us at hello@openlaw.io or tune in in our community Slack channel. Follow our Medium and Twitter for further announcements, tutorials, and helpful tips over the upcoming weeks and months.

— The OpenLaw Team