# spine-unity Runtime Documentation

> **Licensing**
>
> A Spine license is [required](/git/spine-runtimes/spine-unity#licensing) to integrate the Spine Runtimes into your applications.

## Overview
The spine-unity runtime is a Unity plugin supporting playback and manipulation of animations created with Spine. The [spine-unity](/git/spine-runtimes/tree/spine-unity) runtime is written in C# and based on the generic [spine-csharp runtime](/git/spine-runtimes/spine-csharp). The spine-unity runtime wraps the spine-csharp structs and functions and exposes them as Unity components. Additionally, the spine-unity runtime imports files exported from the Spine Editor and stores them in custom Unity asset types.

Please consult the [Spine Runtimes Guide](/spine-runtimes-guide) 
for a detailed overview of the Spine Runtime architecture.

## Unity
If you are not familiar with programming in C# and using Unity in general, we recommend watching the [official Unity Tutorials](http://unity3d.com/learn/tutorials) first. The [Unity Essentials](https://learn.unity.com/pathway/unity-essentials) and then [Scripting](https://learn.unity.com/project/beginner-gameplay-scripting) topics are a good place to start. Note that the Animation topic is not directly applicable to spine-unity since Spine provides its own animation workflow.

## Table of Contents
<div
  style="
    display: flex;
    flex-direction: column;
  "
>
  <div class="btn-group" style="display: flex; align-items: center; margin-bottom: 16px">
    <input
      type="text"
      id="query"
      maxlength="128"
      title="Search the Spine Unity Runtime Documentation"
      class="input-search"
      style="height: 25px; margin: 0"
    />
    <button id="search" class="btn btn-round" style="margin: 0">
      <span class="iconfont-search"></span>
    </button>
  </div>
  <div id="queryResults" style="display: none; flex-direction: column; gap: 16px; width: 100%; height: 100%; margin-bottom: 16px;">
  </div>
</div>

<script>
const sourceId = "65cb43f03ec0ffabf4624e5f"

const queryUi = document.querySelector("#query");
queryUi.addEventListener("keydown", (event) => {
   if (event.key === "Enter" && !event.shiftKey) {
      event.preventDefault();
      search();
   }
});
const searchButtonUi = document.querySelector("#search");
searchButtonUi.addEventListener("click", () => search());
const resultsUi = document.querySelector("#queryResults");

async function search() {
   resultsUi.innerHTML = "<div>Searching ...</div>";
   resultsUi.style.display = "flex"
   try {
      const response = await fetch(`https://doxie.marioslab.io/api/search?sourceId=${sourceId}&query=${encodeURIComponent(queryUi.value)}`)
      if (!response.ok) throw new Error(await response.text());
      const results = (await response.json()).results;
      resultsUi.innerHTML = "";
      let i = 0;
      for (const result of results) {
         const row = renderResult(result);
         if (row) {
            resultsUi.append(row);
            i++;
            if (i == 5) break;
         }
      }
   } catch (e) {
      console.log("Search failed", e);
      resultsUi.innerHTML = "<div>Sorry, could not find any results.</div>"
   }
}

function renderResult(result) {
   const parts = result.text.split("\n\n");
   parts.shift();
   const text = stripMarkdown(parts.join(" "));
   if (text.length == 0) return;
   const resultUi = document.createElement("div");
resultUi.innerHTML = `
    <a
      href="${result.docUri}"
      style="font-size: 18px"
      >${result.docTitle}</a
    >
    <p style="margin-bottom: 0px;">${text.substring(0, 400)} ...</p>
`
   resultUi.style.display = "flex";
   resultUi.style.flexDirection = "column";
   return resultUi;
}

function stripMarkdown(markdownText) {
console.log(markdownText)
  const htmlText = markdownText
    .replace(/<callout>.*?<\/callout>/gs, '') // Callouts
    .replace(/.*?\n#/gs, "#") // All to first header
    .replace(/(\*\*|__)(.*?)\1/g, '$2') // Bold **text** or __text__
    .replace(/([\*_])(.*?)\1/g, '$2') // Italic *text* or _text_
    .replace(/\~\~(.*?)\~\~/g, '$1') // Strikethrough ~~text~~
    .replace(/\!\[[^\]]*\]\([^\)]*\)/g, '') // Images ![alt text](image.jpg)
    .replace(/\[([^\]]*)\]\([^\)]*\)/g, '$1') // Links [text](http://) but keep the text
    .replace(/\n#+\s*(.*)/g, '\n$1') // Headers
    .replace(/\n[-\*]\s/g, ' ') // Lists
    .replace(/\n\d+\.\s/g, ' ') // Numbered lists
    .replace(/\n>/g, '') // Blockquotes
    .replace(/#/g, "") // Titles
    .replace(/`{3}.*?`{3}/gs, '') // Fenced code blocks
    .replace(/`(.+?)`/g, '$1') // Inline code
    .replace(/\[[^\]]*\]/g, '') // In brackets
    .replace(/\n/g, ' '); // New lines to spaces
  return htmlText.trim();
}
</script>


<div style="margin-right:20px">!!
* [Installation](/spine-unity-installation)
* [Examples](/spine-unity-examples)
* [Assets](/spine-unity-assets)
* [Main Components](/spine-unity-main-components)
* [Utility Components](/spine-unity-utility-components)
* [Rendering](/spine-unity-rendering)
* [Timeline Extension UPM Package](/spine-unity-timeline)
* [On-Demand Loading Extension UPM Packages](/spine-unity-on-demand-loading)
* [FAQ](/spine-unity-faq)
</div>!!

[Next: Installation](/spine-unity-installation)