A minimal React app that integrates Google Blockly with Python code generation. This is the starting point for building your own Blockly-based data science environment — you’ll even be able to add your own blocks and languages like R!
- Blockly in a modern React app
- Generates Python code from blocks
Make sure you have the following installed:
- Node.js (LTS version) — includes npm
- A code editor Visual Studio Code)
- A terminal (PowerShell, bash, etc.)
-
Clone the repo:
git clone https://github.com/mariopesch/spockly-demo.git cd spockly-demo
2. **Install dependencies**:
```bash
npm install
```
3. **Run the app**:
```bash
npm run dev
```
4. **Open your browser**:
Open [http://localhost:5173](http://localhost:5173) in your browser to see the app in action.
5. **Edit the code**:
Open `src/App.jsx` in your code editor and start modifying the code. The app will automatically reload with your changes.
6. **Explore the Blockly editor**:
- Drag and drop blocks to create your own workflows.
- Click the "Generate Python Code" button to see the generated code.
- Modify the blocks and see how the generated code changes.