Skip to main content

HTML Quickstart

Developer Key

A rate-limited API developer key can be provisioned from the Sapling dashboard. Developer keys allow for processing of 5000 characters every 24 hours. Complete this questionnaire for production access and pricing.

Here's a minimal webpage using the Sapling SDK.

caution

Do not serve a page like this publicly, as it exposes the API key.

  • During development, you can pass in the API key and use Sapling's endpoints by setting mode: 'dev' in the init function.
  • However, for production, do not pass the API key in JavaScript. Instead, include the API key in your backend and call Sapling's endpoints from the backend. This is the default setting with mode: 'prod'.
<script src="https://sapling.ai/static/js/sapling-sdk-v1.0.2.min.js"></script>

<div contenteditable="true" id="check-space" sapling-ignore="true">Lets get started!</div>

<script type="text/javascript">
Sapling.init({
key: '<API_KEY>',
endpointHostname: 'https://api.sapling.ai',
editPathname: '/api/v1/edits',
statusBadge: true,
mode: 'dev',
});

const contentEditable = document.getElementById('check-space');
Sapling.observe(contentEditable);
</script>

Deploying to Production

  • Import the SDK by inserting it into a page as a JavaScript script.
  • Initialize with API key using the Sapling.init method.
  • Observe any textarea or contenteditable DOM element using the Sapling.observe method.
  • Set up a backend endpoint with your API key to request edits.
Quickstart
  • Save the HTML sample code to sdk.html and open in a browser.
  • Save the Python (Flask) sample code to sdk_flask.py.
  • Update <API_KEY> in the Python code.
  • Then run the following in command line:
pip install flask requests flask_cors
FLASK_APP=sdk_flask.py flask run

Here's a demo frontend page:

<script src="https://sapling.ai/static/js/sapling-sdk-v1.0.2.min.js"></script>

<div contenteditable="true" id="editor" sapling-ignore="true">Lets get started!</div>

<script type="text/javascript">
Sapling.init({
endpointHostname: 'http://localhost:5000',
editPathname: '/edits',
statusBadge: true,
});

const contentEditable = document.getElementById('editor');
Sapling.observe(contentEditable);
</script>

Here's the backend in Python (Flask). Adapt the code below according to the framework that you're using.

import requests
from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins='*')

SAPLING_API_HOSTNAME = 'https://api.sapling.ai'

@app.route('/edits', methods=['POST'])
def get_edits():
args = request.get_json()
# Keep this secret
api_key = '<API_KEY>'
args['key'] = api_key
result = requests.post(SAPLING_API_HOSTNAME + '/api/v1/edits', json=args)
result = result.json()
return jsonify(result), 200

For more information please see the JavaScript documentation.