<commit_before># API Reference

* [`render`](#renderToelement-context)
* [Components](#components)
  * [`<Artboard>`](#artboard)
  * [`<Image>`](#image)
  * [`<RedBox>`](#redbox)
  * [`<Text>`](#text)
  * [`<View>`](#view)
* [`Platform`](#platform)
  * [`OS`](#os)
  * [`Version`](#version)
  * [`select`](#selectobj)
* [`StyleSheet`](#stylesheet)
  * [`hairlineWidth`](#hairlinewidth)
  * [`absoluteFill`](#absolutefill)
  * [`create`](#createstyles)
  * [`flatten`](#flattenstyles)
  * [`resolve`](#resolvestyle)
* [`TextStyles`](#textstyles)
  * [`create`](#createstyleoptionsstyles)
  * [`resolve`](#resolvestyle)

### `render(element, context)`
Returns the top-level rendered Sketch object.

#### params
##### `element` (required)

##### `context` (required)
The Sketch context passed to a plugin

### returns
The top-most rendered native Sketch layer.

#### Example
```js
const Document = props =>
  <View>
    <Text>Hello world!</Text>
  </View>;

const onRun = context =>
  render(<Document />, context);
```

## Components
### `<Artboard>`
Wrapper for Sketch's artboards.

#### Props
| Prop | Type | Default | Note |
|---|---|---|---|
| `name` | `String` | | The name to be displayed in the Sketch Layer List |
| `children` | `Node` | | |
| `style` | [`Style`](/docs/styling.md) | | |

#### Example
```js<commit_msg>add docs for renderToJSON<commit_after># API Reference

* [`render`](#renderelement-context)
* [`renderToJSON`](#renderToJSONelement)
* [Components](#components)
  * [`<Artboard>`](#artboard)
  * [`<Image>`](#image)
  * [`<RedBox>`](#redbox)
  * [`<Text>`](#text)
  * [`<View>`](#view)
* [`Platform`](#platform)
  * [`OS`](#os)
  * [`Version`](#version)
  * [`select`](#selectobj)
* [`StyleSheet`](#stylesheet)
  * [`hairlineWidth`](#hairlinewidth)
  * [`absoluteFill`](#absolutefill)
  * [`create`](#createstyles)
  * [`flatten`](#flattenstyles)
  * [`resolve`](#resolvestyle)
* [`TextStyles`](#textstyles)
  * [`create`](#createstyleoptionsstyles)
  * [`resolve`](#resolvestyle)

### `render(element, context)`
Returns the top-level rendered Sketch object.

#### params
##### `element` (required)

##### `context` (required)
The Sketch context passed to a plugin

### returns
The top-most rendered native Sketch layer.

#### Example
```js
const Document = props =>
  <View>
    <Text>Hello world!</Text>
  </View>;

const onRun = context =>
  render(<Document />, context);
```

### `renderToJSON(element)`
Returns a Sketch JSON object for further consumption - doesn't add to the page.

#### params
##### `element` (required)

### returns
The top-most Sketch layer as JSON.

## Components
### `<Artboard>`
Wrapper for Sketch's artboards.

#### Props
| Prop | Type | Default | Note |
|---|---|---|---|
| `name` | `String` | | The name to be displayed in the Sketch Layer List |
| `children` | `Node` | | |
| `style` | [`Style`](/docs/styling.md) | | |

#### Example
```js
{'fraction_non_alphanumeric': 0.23533471359558317, 'fraction_numerical': 0.0, 'mean_word_length': 4.940573770491803, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3768581', 'n_tokens_mistral': 1049, 'n_tokens_neox': 978, 'n_words': 213}