Integrating Hypothesis using Ajax and CORS

We’ve recently added two ways to integrate Hypothesis with other systems: CORS (Cross-Origin Resource Sharing) and Atom. We’ll explore what you can do with CORS here, and with Atom feeds in another post.

It’s long been possible to embed Hypothesis in an iframe on a web page. On this page you can see two examples. The first embeds a user’s stream of annotations, and the second embeds an individual annotation along with its attached threaded conversation.

When these views meet your needs, the iframe method is a simple and easy way to include them in web pages. But what if you need to show the data in a different way? Hypothesis provides an API that developers can use to query the service and create novel views of the annotation data. Until now you could do that almost any programming language or environment except JavaScript. Without explicit permission from a web service, a browser can’t use JavaScript to make requests to that service’s API. With CORS support now in place, Hypothesis gives that permission.

As a result, a developer can embed JavaScript code on a page that queries the Hypothesis API and injects results into the page. You can see a simple example here. It’s a widget that displays the most recently-annotated URLs in the Hypothesis database and counts the annotations for each URL.

I look forward to seeing the inventive and stylish widgets that developers will create using this new affordance!