> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Quick Start

## Article: Quick Start

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/get-started/quick-start/quick-start.md

## Article Content:

# Quick Start

With Wix you can easily extend a site's functionality using code. This tutorial walks you through creating a simple button that changes text when clicked.

Want to see it in action? Check out our [Hello World example](https://dev.wix.com/docs/coding-examples/getting-started/hello-world/hello-world.md).

In this tutorial, you'll:

- [Enable coding in Wix Studio.](#step-1--enable-coding)
- [Add elements and set IDs.](#step-2--add-elements-and-set-ids)
- [Set initial text with `onReady()`.](#step-3--set-initial-text-with-onready)
- [Add an event handler.](#step-4--add-an-event-handler)
- [Preview and test your code.](#step-5--preview-your-code)

## Before you begin

Sign up for a [Wix Studio account](https://www.wix.com/studio) and log in.

## Step 1 | Enable coding

In the left sidebar, click ![Code icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/9c7667c9a288fa900e86664602c5a94e.png) and then **Start Coding**.

![Wix Studio start coding](https://wixmp-833713b177cebf373f611808.wixmp.com/images/7bbc652d39e238e85896ddc1798c9823.png)

This enables the built-in code editor at the bottom of your page and gives you access to the site's code files, databases, and other developer tools.

## Step 2 | Add elements and set IDs

Add a text element and button to your page, then set meaningful IDs:

1. Add a **Text** element and set its ID to `helloText`
2. Add a **Button** element and set its ID to `clickMeButton`

> **Tip:** Always use descriptive IDs for elements you'll reference in code.

To access these elements in your code, you'll use Wix's `$w` selector:

```js
// Select elements by ID
$w("#clickMeButton"); // Button
$w("#helloText"); // Text element
```

> **Note:** You can't use standard DOM APIs or libraries like jQuery to access Wix page elements.

## Step 3 | Set initial text with `onReady()`

Wix provides an `onReady()` handler that runs when page elements finish loading. Use it to set the initial text of your element:

```js
$w.onReady(function () {
  $w("#helloText").text = "Hello There";
});
```

## Step 4 | Add an event handler

Now add a click event handler to the button that changes the text:

```js
$w("#clickMeButton").onClick(() => {
  $w("#helloText").text = "Hello Wix!";
});
```

Note that you can add the event handler directly in the `onReady()` handler, or outside it if you prefer.

## Step 5 | Preview your code

Click **Run** in the code editor or the Preview icon ![Preview icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/396535a2065ce724807326c1f5071d43.png) to test your code. The developer console shows at the bottom for debugging.

## Next steps

Now that you understand Wix's core patterns, explore these resources to learn more:

- **[Coding Examples](https://dev.wix.com/docs/coding-examples.md)**: Interactive examples with working code previews
- **[$w API Reference](https://dev.wix.com/docs/velo/velo-only-apis/$w/introduction.md)**: Complete guide to the selector API
- **[Backend code](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/web-modules/about-web-modules.md)**: backend functions and web modules
- **[Data API](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/work-with-data/data-api/about-the-data-api.md)**: Database operations and CMS integration
- **[npm packages](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/about-npm-packages.md)**: Adding 3rd-party libraries