Sylph

A drag and drop Svelte prototyping tool.

Table of Contents

• About
• Features
• Getting Started
• Example
• Contributors
• License

About

Sylph is a prototyping tool for Svelte web applications. With its convenient drag-and-drop interface, component customizer, real-time code preview, and real-time site preview, Sylph allows users to quickly prototype and develop the architecture of their Svelte applications. Harnessing the power of Electron, TypeScript, and Svelte, Sylph provides an open-source solution for the fast-growing Svelte community's prototyping needs.

Features

• Drag and drop UI.
• Live code and Svelte application preview.
• Full svelte application saved on your local machine, not just code snippets.

Getting Started

Installing Sylph

Sylph is available for Mac and Windows operating systems. You can download Sylph directly from www.sylph.cc.

Navigate to Sylph releases in the repository and download the package for your respective operating system.

• MacOS:

  • NOTE: As of 10/14/21, Sylph is in beta and the Mac version can only be run from the command line. Please see below for more detailed instructions.
  • Drag the Sylph app into your systems application folder.
  • Open your terminal and type open -a Sylph. Sylph should open soon after.

• Windows:

  • Run the Sylph.exe file.

NOTE: Sylph will occupy port 5000 for its child process.

How to Use Sylph

1. Open Sylph and choose "Create a new Svelte prototyping project". Type in the project name and click "Create New". NOTE: We do not advise creating two projects of the same name in the same directory.
2. When the Sylph sandbox loads, click the "Components" tab on the right-hand side to open a drawer of components. Drag and drop into the sandbox.
3. To customize an element, click on it in the sandbox. It should turn purple and you should see a menu on the right-hand side change to "Element Attributes".
   • Assign an ID to the selected element to edit styles.
4. To edit global elements and classes, make sure all elements are de-selected and input your customization into the right-hand column.
5. You can see your project's directory in the upper right. Click on the arrow to view a dropdown of the directory structure.
6. Use the tabs in the bottom panel to switch between the code editor, preview, or code editor + preview views.
7. Drag the horizontal and vertical bars to resize the panels to your desire.
8. When finished, you can exit the application or select File -> Close Project.
9. If you would like to reload your saved project, navigate to the main menu and select "Open a previous Svelte prototyping project", selecting your project's filename from the dropdown list. Then click "Open".

How to Contribute to Sylph

To run Sylph locally, clone this repository to your local machine and open it.

Install the required npm packages and run the local version.

npm i
npm run dev

Feel free to create a branch and make a pull request if you would like to suggest any improvements!

Known Issues

• Reloading a project without restarting Sylph will NOT update the preview window.

Contributors

Sylph is an open-source product developed through OSLabs. This project is maintained by the below group of dedicated engineers, but we openly welcome, encourage and appreciate any and all contributions.

Randy Diebold	Kailee Pedersen	Haobo Wang	Nick Andreala

If you'd like to reach out with any feedback or just want to connect, feel free to contact us.

License

This product is licensed under the MIT License.

This is an open source product.

This product is accelerated by OS Labs. © 2021 GitHub, Inc. Terms Privacy Security Status Docs