Skip to content

openProject API always opens StackBlitz homepage when used in a Figma plugin #28

Open

Description

@isBatak

I encountered an issue with the openProject API of the StackBlitz SDK while creating a Figma plugin. The plugin renders a button that, when clicked, is supposed to create a project using the StackBlitz SDK. However, instead of opening the specified project, it always redirects to the StackBlitz homepage.

The implementation is based on your official example:
https://stackblitz.com/edit/sdk-create-project-with-npm-ts?file=index.ts

Steps to Reproduce:

  1. Clone the repository: GitHub Repo Link

  2. Build the plugin:

    $ npm run build

    This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

    To watch for code changes and rebuild the plugin automatically:

    $ npm run watch
  3. Install the plugin in Figma:

    1. In the Figma desktop app, open a Figma document.
    2. Search for and run Import plugin from manifest… via the Quick Actions search bar.
    3. Select the manifest.json file that was generated by the build script.
  4. Click on the "Create StackBlitz project" button in the plugin.
    Image

Expected Behavior:
The openProject API should create and display the specified project in StackBlitz.

Actual Behavior:
The openProject API always redirects to the StackBlitz homepage instead of creating the project.

Additional Notes:

  • The issue might be related to restrictions in Figma’s environment (e.g., iframe sandboxing or CORS).
  • There’s also a CodeSandbox link in the plugin, which works as expected.

Activity

  1. isBatak commented on Feb 18, 2025

    @isBatak
    Author

    After further investigation, I discovered that Figma overrides the POST method and instead sends a GET request. This behavior isn't explicitly documented but has been observed when testing with my local server endpoint.

    In the following example, the request resolves to a GET method on the server, and the message is never received:

    <form id="test" method="post" action="http://localhost:3000/api/generate" target="_blank">
        <input type="hidden" name="message" value="Hello World" />
    </form>
    <button form="test" type="submit">Submit</button>

    Would it be possible to support sending project settings via a GET request using URLSearchParams for the https://stackblitz.com/run endpoint? This would be similar to how CodeSandbox handles it:

    window.open(`https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`, '_blank');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions