> ## Documentation Index
> Fetch the complete documentation index at: https://docs.packagesss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JSON Keys

> JSON Keys for the nodes

export const GridImage = ({window, src, preview = false, img_width = 200, height = 300}) => {
  var host = preview ? '' : 'https://mintlify.s3-us-west-1.amazonaws.com/packages';
  return <div className="grid-image-bg mt-3 mb-3 flex align-items-center" style={{
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
    height,
    width: '100%'
  }}>

    <img src={`${host}${src}`} className={'m-0'} width={img_width} style={{
    zIndex: 2,
    width: '100%',
    maxWidth: img_width,
    border: '1px solid #ccc',
    borderRadius: 5,
    boxShadow: '5px 5px rgba(0,0,0,0.25);'
  }} />

    <div style={{
    transform: 'translateX(-50%)',
    left: '50%',
    top: 0,
    position: 'absolute',
    height: '100%',
    width: '100%',
    zIndex: 0,
    overflow: 'hidden',
    pointerEvents: 'none'
  }}>
      <img src={`${host}/images/grid-bg-trans.png`} className="m-0" />
    </div>
  </div>;
};

<GridImage img_width={300} height={150} src={'/images/JSON-keys-1.png'} />

### What does it do?

JSON Keys are used to specify a key you want to expose in the node.

By exposing the key, you can `@reference` just that key throughout the package.

## How to use it

<GridImage img_width={300} height={150} src={'/images/JSON-keys-2.png'} />

Once you've added one or more JSON keys, you can just `@reference` them in any node that comes after them.