# Develop your app's sidebar elements

Learn how to develop your app's sidebar elements using the Hygraph App SDK tutorial. You will learn how to use the useFormSidebarExtension hook to add a custom sidebar element.

To **create the element**, create a file inside `pages` and name it `google-serp-preview.tsx` with the following content:

```jsx
import { Wrapper } from '@hygraph/app-sdk-react';

export default function GoogleSerpPreview() {
  return <Wrapper>// here goes your custom sidebar code</Wrapper>;
}
```

In this example, you are naming the file `google-serp-preview.tsx` because at the time of [registering the app](https://hygraph.com/docs/app-framework/first-steps/register-your-app#sidebar-element) you used `http://localhost:3000/google-serp-preview` as your `URL`.

**Warning:**

Please note that **Wrapper** should be the parent of your component whenever you use the `useFormSidebarExtension` hook.

**Adding React SDK**

Now, let's import some SDK components and hooks from Hygraph SDK.

Start with importing the `Wrapper` component and `useFormSidebarExtension` hook from the library inside your React application.

You should add the following code at the top of the `google-serp-preview.tsx` file.

```jsx
// Add this at the top of your google-serp-preview.tsx file

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';
```

Then, add `useFormSidebarExtension` hook into `SerpPreview` and adjust the code accordingly, like the following example:

```jsx
import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

const SerpPreview = () => {
  const { extension } = useFormSidebarExtension();

  return (
    <>
      <h3>{extension.name}</h3>
      <div>{extension.description}</div>
    </>
  );
};
```

Finally, let's wrap our custom input field with the `Wrapper` component. Remember to pass in declaration:

```jsx
const GoogleSerpPreview = () => {
  return (
    <Wrapper>
      <SerpPreview />
    </Wrapper>
  );
};

export default GoogleSerpPreview;
```

Your complete custom sidebar code should look like this:

```jsx
// this is the complete code

import { Wrapper, useFormSidebarExtension } from '@hygraph/app-sdk-react';

const SerpPreview = () => {
  const { extension } = useFormSidebarExtension();

  return (
    <>
      <h3>{extension.name}</h3>
      <div>{extension.description}</div>
    </>
  );
};

const GoogleSerpPreview = () => {
  return (
    <Wrapper>
      <SerpPreview />
    </Wrapper>
  );
};

export default GoogleSerpPreview;
```

Finally, you should import your custom React component to `App.js`.

```js
// App.js

import GoogleSerpPreview from './extensions/GoogleSerpPreview';

function App() {
  return (
    <div className="App">
      <GoogleSerpPreview />
    </div>
  );
}

export default App;
```

**Next steps:**

Congratulations! Now that you've registered and developed your app, you are ready to [install it](https://hygraph.com/docs/app-framework/app-installation) and try it out, if you didn't install it already while testing it!

You may also want to access more in depth information about the app registration process, along with all the options available as well as all possible actions you can take in the registration form. [Click here](https://hygraph.com/docs/app-framework/register-an-app) to know more.

If you have any questions, you're welcome to [join our community!](https://hygraph-community.slack.com/)