# VStory

**Repository Path**: VisActor/VStory

## Basic Information

- **Project Name**: VStory
- **Description**: Use data to tell stories.An intelligent Visualization Narrative Development Framework.
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-03-25
- **Last Updated**: 2025-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
  <a href="https://github.com/VisActor#gh-light-mode-only" target="_blank">
    <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg"/>
  </a>
  <a href="https://github.com/VisActor#gh-dark-mode-only" target="_blank">
    <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg"/>
  </a>
</div>

<div align="center">
  <h1>VStory</h1>
</div>

<div align="center">

VStory integrates the underlying capabilities of VisActor to provide an out-of-the-box data narrative solution.

</div>

<div align="center">

[English](./README.md) | 简体中文 | [日本語](./README.ja-JP.md)

</div>

<div align="center">

(Demo Video)

</div>

## 简介

VStory is a chart component library in the VisActor visualization system. It is based on the visualization chart library [VChart](https://github.com/VisActor/VChart), the visualization grammar library [VGrammar](https://github.com/VisActor/VGrammar), and the visualization rendering engine [VRender](https://github.com/VisActor/VRender) for component encapsulation. The core capabilities are as follows:

1. **One code for multiple platforms**: Automatically adapt to desktop, H5, and multiple small program environments
2. **Narrative-oriented**: Comprehensive application of a series of enhanced functions such as annotation, animation, process control, narrative templates, etc. for narrative visualization creation.
3. **Scene precipitation**: Facing the end users to precipitate visualization capabilities, liberating the productivity of developers

## Repository Introduction

This repository contains the following packages:

1. [`vstory`](./packages/vstory/): Core package, VStory editor
2. [`docs`](./docs/): VStory site source code, including all Chinese and English documents, sample code, etc. on the site.

## 🔨 Usage

Under construction...

## ⌨️ Development

First, install [@microsoft/rush](https://rushjs.io/pages/intro/get_started/) globally:

```bash
$ npm i --global @microsoft/rush
```

Then clone the code to your local machine:

```bash
# clone
$ git clone git@github.com:VisActor/VStory.git
$ cd VStory
# 安装依赖
$ rush update
# 开始 vstory 的本地开发
$ rush start
# 开始站点的本地开发
$ rush docs
```

## 📖 Documents

After installing and updating dependencies, you can execute the docs command to start the local document preview of vstory:

```bash
# start vstory document server
$ rush start
```

## 🔗 Related Links

- [VCharts Chart Examples](https://www.visactor.io/vchart/example)
- [VChart Chart Tutorial](https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide)
- [VChart Chart Configuration Items](https://www.visactor.io/vchart/option/)
- [VChart API](https://www.visactor.io/vchart/api/API/vchart)
- [VGrammar](https://www.visactor.io/vgrammar)
- [VRender](https://www.visactor.io/vrender)

## 🤝 Contributing [](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request)

If you would like to contribute, please read the [Code of Conduct](https://sophon-ai.bytedance.net/paas/CODE_OF_CONDUCT.md) and [Contributing Guidelines](https://sophon-ai.bytedance.net/paas/CONTRIBUTING.md).

Small streams make a river, and eventually become a sea!

<a href="https://github.com/visactor/vstory/graphs/contributors"></a>