# Develop your app page elements

Learn how to develop your app page elements using the Hygraph App SDK tutorial. You will learn how to use the useFieldExtension hook to add a custom field.

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

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

export default function Page() {
  return (
    <Wrapper>
      <h1>Hello, Hygraphers!</h1>
      <p>Here is the description</p>
    </Wrapper>
  );
}
```

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

**Warning:**

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

Next, import `useApp()` at the top, then create `PageElement` component and move code there.

Then you need to get the installation object from `useApp()` to display you app name, description, and icon.

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

function PageElement() {
  const { installation } = useApp();
  return (
    <div>
      <div>
        {/* <!-- This is the app avatar --> */}
        <img src={installation.app.avatarUrl} width="32" height="32" />
      </div>

      {/* <!-- This is the app name --> */}
      <h1>{installation.app.name}</h1>

      {/* <!-- This is the app description --> */}
      <p>{installation.app.description}</p>
    </div>
  );
}

export default function Page() {
  return (
    <Wrapper>
      <PageElement />
    </Wrapper>
  );
}
```

Then, add `showToast`:

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

function PageElement() {
  const { installation, showToast } = useApp();
}
```

After that, add button with `handleClick` method:

```jsx
return (
  <div>
    <div>
      {/* <!-- This is the app avatar --> */}
      <img src={installation.app.avatarUrl} width="32" height="32" />
    </div>

    {/* <!-- This is the app name --> */}
    <h1>{installation.app.name}</h1>

    {/* <!-- This is the app description --> */}
    <p>{installation.app.description}</p>

    {/* <!-- Add button --> */}
    <div>
      <button onClick={handleClick}>Click Me!</button>
    </div>
  </div>
);
```

And finally, add `handleClick` method, triggering `showToast`:

```jsx
function PageElement() {
  const { installation, showToast } = useApp();

  const handleClick = () => {
    showToast({
      title: 'Hello World!',
      description: 'This is a toast message',
      variantColor: 'success',
    });
  };

  // rest of code
}
```

Your complete custom app element should look like this:

```jsx
// this is the complete code

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

function PageElement() {
  const { installation, showToast } = useApp();

  const handleClick = () => {
    showToast({
      title: 'Hello World!',
      description: 'This is a toast message',
      variantColor: 'success',
    });
  };

  return (
    <div>
      <div>
        {/* <!-- This is the app avatar --> */}
        <img src={installation.app.avatarUrl} width="32" height="32" />
      </div>

      {/* <!-- This is the app name --> */}
      <h1>{installation.app.name}</h1>

      {/* <!-- This is the app description --> */}
      <p>{installation.app.description}</p>

      {/* <!-- Add button --> */}
      <div>
        <button onClick={handleClick}>Click Me!</button>
      </div>
    </div>
  );
}

export default function Page() {
  return (
    <Wrapper>
      <PageElement />
    </Wrapper>
  );
}
```

**Next steps:**

Congratulations! Now that you've registered and developed your app, you are ready to [install it](https://hygraph.com/classic-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/classic-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/)