Quickstart

Setup your editor

If you are using Visual Studio Code (opens in a new tab) you should install the rspc extension (opens in a new tab) for useful code shortcuts.

CLI

Coming soon...

Manual setup

Get rspc up and running in your own project.

Create new project (optional)

If you haven't got a Rust project already setup, create a new one using the following command.

cargo new <project-name>
cd <project-name>
cargo add tokio --features full # rpsc requires an async runtime

Install rspc

rspc is distributed through a Rust crate hosted on crates.io (opens in a new tab). Add it to your project using the following command:

cargo add rspc specta

This command will not exist if your running a Rust version earlier than 1.62.0, please upgrade your Rust version if this is the case.

Create a router

Go into src/main.rs and add the following code:

src/main.rs

use rspc::alpha::Rspc;
 
const R: Rspc<()> = Rspc::new();
 
fn router() -> crate::Router<()> {
    R.router()
        // TODO: Set ts export path using config
        .procedure("version", R.query(|ctx, _: ()| env!("CARGO_PKG_VERSION")))
        .compat()
}
 
 
#[tokio::main]
async fn main() {
    let router = router();
 
    // TODO: Mount an integration to expose your API
}
 
#[cfg(test)]
mod tests {
    // It is highly recommended to unit test your rspc router by creating it
    // This will ensure it doesn't have any issues and also export updated Typescript types.
 
    #[test]
    fn test_rspc_router() {
        super::router();
    }
}

Exposing your router

Now that you have a router your probably wondering how you access it from your frontend. This is done through an rspc integration. I would recommend starting with Axum (opens in a new tab), by following this.

Usage on the frontend

Install the frontend package using the following command:

pnpm install @rspc/client @rspc/react-query

src/MyComponent.tsx

// TODO: Finish example -> show imports
 
function SomeComponent() {
  const version = rspc.useQuery(["version"]);
 
  return (
    <>
      <p>{version.data}</p>
    </>
  );
}

Overview Basics