# Embedded component playground

> Design, test, and preview the embedded components from you browser

The Embedded Component Playground is a live test environment that lets you edit configurations, test themes and component types, and change up styling on the fly. The Playground aims to dramatically boost your developer productivity.

Every code change gets instant feedback from the live coding environment. You can even choose to open your work in Code Sandbox, where you can download the code and integrate into your project or work with friends.

<div>
  <img src="https://files.buildwithfern.com/payabli.docs.buildwithfern.com/8cbe9dee81540a30630fcc80f4c6e7fd12741d3f684c1a28e9082099676e56f3/images/release_notes/rn-playground.png" alt="a graphic showing the playground UI" />

  <img src="https://files.buildwithfern.com/payabli.docs.buildwithfern.com/54628ca9bba3a3d18abe4892be6a161445a2a1c350a6ead9126b5e2dc44a5b71/images/release_notes/rn-playground-dark.png" alt="a graphic showing the playground UI" />
</div>

<img />

<Tip>
  Check out the [Playground](https://playground.payabli.com) to get started!
</Tip>

## Using the Playground

Using the Playground is a breeze. Go to [https://playground.payabli.com](https://playground.payabli.com) and add your Payabli entrypoint and API token values. After you've done that, your component renders in real time and you can work on configuring it.

## Configuration drawer

Open the configuration drawer by clicking the gear icon on the top left or using the keyboard shortcut \[Ctrl + K].

The drawer contains several helpful options to help you craft your component.

<Steps>
  <Step title="Component Type">
    Choose the type of component you want to use. The most popular and flexible option is EmbeddedMethod, but PayMethod is available too.
  </Step>

  <Step title="Switcher (EmbeddedMethod only)">
    This determines which UI preset to use to switch between configurations, such as Card or ACH payments.
  </Step>

  <Step title="Configuration">
    Controls what type of data the component will display, such as payment type, input field names, accepted card brands, and more.
  </Step>

  <Step title="Component Theme">
    This is the theme that's used by the embedded component to style the container and fields.
  </Step>

  <Step title="Control Theme">
    This supplementary theme styles some external UI controls, such as tabs, toggles, and trigger buttons that go with the embedded component.
  </Step>
</Steps>

## Experimenting with the code

After you've set up your component's basic options, it's time to start experimenting with the code directly. In the code editor, there are  three files which each control different functions:

<Steps>
  <Step title="index.html">
    This file contains the setup that links your configuration and style together, and also contains the switcher mechanism and trigger buttons.
  </Step>

  <Step title="config.js">
    This file contains the configuration for your component, like payment methods and input field names. For demo purposes in the Playground, it also contains the CSS to style the container and input fields.

    When you implement your own component, we *strongly* recommend that you  export your theme's CSS to an external file and link it to your component using [customCssUrl](/guides/pay-in-components-overview#customize-component-styling).
  </Step>

  <Step title="base.css">
    This file is where the control theme is located, which affects external UI controls such as the tabs, toggles, or trigger buttons. It also contains other important CSS that enables the components to function.
  </Step>
</Steps>

## Next steps

Go ahead and experiment with the Playground. When you're done, you can either copy the content from the editor or open your work in Code Sandbox to download it.