Plasmic Documentation

repository·master·Indexed 27 days ago

https://github.com/plasmicapp/plasmic

An open-source visual builder that integrates with existing codebases, allowing developers to use custom React components within a visual editor. It serves as a design tool and headless CMS, providing SDKs for Next.js, Gatsby, and React, as well as a CLI for project synchronization and a 'create-plasmic-app' utility for project initialization.

Tokens
71.6K
Snippets
97
Records
590
Agent score
91%

What's inside Plasmic

  1. Overview of @plasmicapp/query

    master

    @plasmicapp/query is an isomorphic, component-level data-fetching library built on top of swr. It allows you to fetch data within React components in both client-side and server-side environments.

    Key capabilities:

    • Component-level fetching: Decouples data fetching from page-level functions like getStaticProps or getServerSideProps (in Next.js Pages Router).
    • Server-side prefetching: When used in conjunction with @plasmicapp/prepass, it enables Suspense-style data prefetching on the server, ensuring data is available before the component renders on the client.

    Important Constraints:

    • Not for React Server Components (RSC): This library is designed for server-rendering environments like the Next.js Pages Router, not for the RSC architecture.
    • Framework Agnostic: While useful with Plasmic, the library is not specific to it.
  2. Use @plasmicapp/host to enable code components in Plasmic Studio

    master
    The @plasmicapp/host package provides the necessary functions and type definitions to allow your existing code components to be used within Plasmic Studio. This is a key part of 'application hosting,' allowing you to bridge your codebase with Plasmic's visual design environment.
  3. Use @plasmicapp/watcher to monitor Plasmic changes

    master
    The @plasmicapp/watcher package provides a utility function designed to watch for changes in Plasmic designs using socketio. This is typically used in development environments to trigger rebuilds or updates when a designer makes changes in the Plasmic app.
  4. Use enquire-js for SSR-compatible media queries

    master
    This package is a fork of enquire.js specifically designed to work with Server-Side Rendering (SSR). Standard enquire.js exports new MediaQueryDispatch(), which causes crashes in server environments. This fork prevents those crashes by exporting undefined when running on a server, allowing your application to boot safely in Node.js or other non-browser environments.