---
title: "Overview"
---
import { LinkButton, LinkCard, Card, CardGrid } from '@astrojs/starlight/components';
import { YouTube } from 'astro-embed';
import { Image } from 'astro:assets';
import mattermostLogoLight from '/src/assets/mattermost-logo-dark.svg';
import mattermostLogoDark from '/src/assets/mattermost-logo-light.svg';
import FourCardGrid from '@slint/common-files/src/components/FourCardGrid.astro';
import BannerImage from '/src/assets/banner.webp';
import LanguageHint from '/src/assets/getting-started/language-hint.webp';
import RunInSlintPad from '/src/assets/getting-started/run-in-slintpad.webp';
import CopySnippet from '/src/assets/getting-started/copy-snippet.webp';
import LineHighlight from '/src/assets/getting-started/line-highlight.webp';



<div style="display: flex; justify-content: center;">
  <Image src={BannerImage} style={{width: "700px"}} width="1200px" alt="Slint examples running on a range of devices"/>
</div>

<YouTube id="vWLXaXJkCWw" poster="https://github.com/user-attachments/assets/769bb54d-2c85-4c12-b761-06e888be2fe2"/>

<div style="display: flex; justify-content: center; margin: 1.5rem 0;">
<LinkButton href={`${import.meta.env.BASE_URL}guide/getting-started/`} icon="right-arrow">Get Started</LinkButton>
</div>

The documentation is split into several sections:

<CardGrid>
<LinkCard
  title="Guide"
  description="Get up and running with the tooling for Slint development including the IDE integration via the Slint Language Server (LSP) and Slint Viewer.
  <br/><br/>
  Learn all the key concepts of Slint to understand and use the Slint language."
  href={`${import.meta.env.BASE_URL}`}
>
</LinkCard>

<LinkCard
  title="Reference"
  description="Browse the API reference for all aspects of the Slint language: The elements, properties, functions, callbacks, namespaces, as well as
the std-widgets library. A set of cross platform components that can be used to build desktop applications."
  href={`${import.meta.env.BASE_URL}/reference/overview`}
>
</LinkCard>

<LinkCard
  title="Tutorial"
  description="Learn by example and see how to structure a simple application via a step-by-step tutorial that walks you
through the creation of a simple memory game example."
href={`${import.meta.env.BASE_URL}/tutorial/quickstart/`}
>
</LinkCard>

<LinkCard
  title="Language Integrations"
  description="API reference for the Rust, C++, JavaScript, and Python versions of Slint."
href={`${import.meta.env.BASE_URL}/language-integrations/`}
>
</LinkCard>
</CardGrid>

### Documentation features

The documentation includes a lot of code snippets. The language hint lets you know what
language the snippet is written in.
<div style="display: flex; justify-content: left;">
<Image src={LanguageHint} style={{width: "500px"}} alt="Screenshot showing language hint" />
</div>


Some snippets of Slint code are interactive. You can click the `run` button to run the snippet
in a web based live-editing tool called [SlintPad](https://slintpad.com).
<div style="display: flex; justify-content: left;">
<Image src={RunInSlintPad} style={{width: "500px"}} alt="Screenshot showing run button"  />
</div>

To easily copy the text of a snippet use the copy button.
<div style="display: flex; justify-content: left;">
<Image src={CopySnippet} style={{width: "500px"}} alt="Screenshot showing copy button"  />
</div>

Examples that want to help focus on a specific part of the code will have highlights. They are only
a documentation feature and you won't see this kind of highlight when writing your own code.
<div style="display: flex; justify-content: left;">
<Image src={LineHighlight} style={{width: "500px"}} alt="Screenshot showing text highlights" />
</div>

### Get in touch

<FourCardGrid>
<LinkCard
  title="Chat"
  href="https://chat.slint.dev/"
  target="_blank"
/>
<LinkCard
  title="Discussions"
  href="https://github.com/slint-ui/slint/discussions"
  target="_blank"
/>
<LinkCard
  title="Report Bugs"
  href="https://github.com/slint-ui/slint/issues"
  target="_blank"
/>
<LinkCard
  title="Email"
  href="mailto:info@slint.dev"
  target="_blank"
/>
</FourCardGrid>