From cf9de52b6e2bdd19d24db62fb9dc873b32b09d9e Mon Sep 17 00:00:00 2001
From: thomcsmits <thomcsmits@outlook.com>
Date: Wed, 12 Jun 2024 11:39:19 -0400
Subject: [PATCH] update readme

---
 README.md | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 53 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 4150c05..b3d6cea 100644
--- a/README.md
+++ b/README.md
@@ -7,15 +7,65 @@ AltGosling is a library based on [Gosling](https://github.com/gosling-lang/gosli
 There is a large gap in accessibility, specifically for people with blindness and low vision (BLV), on the web. The Web Content Accessibility Guidelines ([WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)) require text descriptions for images. AltGosling creates text descriptions for genomic visualizations created with Gosling. In this way, interactive visualizations can be deployed on the web and automatically include text descriptions.
 
 
+## Installation
+AltGosling is available as an [NPM package](https://www.npmjs.com/package/altgosling).
+
+Install it with your favorite package manager.
+
+```bash
+npm install altgosling
+```
+
+## Quick Start with React
+The fastest way to get AltGosling running is shown below.
+
+```bash
+import React from 'react';
+import gosling from 'gosling.js';
+import { AltGoslingComponent } from 'altgosling';
+
+function Demo() {
+  // example spec
+  const goslingSpec = {
+    "title": "Tonsil ChIP-seq in Th1 cells",
+    "tracks": [
+      {
+        "layout": "linear",
+        "width": 800,
+        "height": 180,
+        "data": {
+          "url": "https://resgen.io/api/v1/tileset_info/?d=UvVPeLHuRDiYA3qwFlm7xQ",
+          "type": "multivec",
+          "row": "sample",
+          "column": "position",
+          "value": "peak",
+          "categories": ["sample 1"],
+          "binSize": 5
+        },
+        "mark": "bar",
+        "x": {"field": "start", "type": "genomic", "axis": "bottom"},
+        "xe": {"field": "end", "type": "genomic"},
+        "y": {"field": "peak", "type": "quantitative", "axis": "right"},
+        "size": {"value": 5}
+      }
+    ]
+  }
+  return (
+    <>
+      <AltGoslingComponent spec={goslingSpec}/>
+    </>
+  );
+}
+```
+
+
 ## Demo
 A demo of AltGosling is available [here](https://gosling-lang.github.io/altgosling/). 
 
 All examples are available in [demo/examples](https://github.com/gosling-lang/altgosling/tree/master/demo/examples).
 
-A minimum example of how to include AltGosling as a React Component can be found in [demo/Demo.tsx](https://github.com/gosling-lang/altgosling/blob/master/demo/Demo.tsx).
-
 
-## Contributing to Alt
+## Contributing to AltGosling
 We welcome contributions to AltGosling! Please refer to the [contributing guidelines](CONTRIBUTING.md).