Introducing PAPI Interactive Console / Playground

[codingsh]

Greetings, Polkadot Community!

Today, I’m thrilled to unveil a project that’s been brewing in our workshop: the PAPI Interactive Console — a comprehensive development environment designed to revolutionize how web developers approach building on Polkadot.

What Is PAPI Interactive Console?

The PAPI Interactive Console is a sophisticated tool that enables developers to craft, evaluate, and deploy React components that seamlessly interact with Polkadot and its parachains in real-time. We’ve built upon our existing foundation (already live at papi-simulator.aipop.fun) to transform what began as a learning resource into a powerful development environment.

Imagine writing a React component and instantly seeing how it interacts with blockchain state — no complex setup, no waiting for transactions to propagate through test environments, just immediate feedback in a familiar development paradigm.

Why We Built This

As blockchain developers ourselves, we’ve experienced the steep learning curve that comes with transitioning from traditional web development to blockchain. Even experienced React developers face significant barriers when beginning to build on Polkadot:

• Setting up a local development environment is complex
• Understanding blockchain state management differs from standard web practices
• Testing interactions requires multiple tools and considerable waiting time
• Learning curve for parachain-specific nuances is substantial

Our solution: bring the blockchain to the developer in a format they already understand.

Current Capabilities

The current implementation at papi-simulator.aipop.fun already offers:

• Network Selection: Easily switch between Polkadot testnets
• Code Editor: Write and execute code with syntax highlighting
• Console Output: Visualize results directly in the browser
• Example Selector: Browse categorized examples to learn from
• Network Information: View real-time chain stats and details

Here’s what the interface looks like today:

Our Roadmap

We’re now embarking on a significant expansion of the platform. Our comprehensive roadmap includes:

1. Enhanced Code Editor: TypeScript-specific features for Polkadot API development, including autocompletion and inline type checking
2. React Component Preview: Real-time rendering of components as they’re being edited
3. State Management System: Connecting React components to blockchain data with specialized hooks
4. Polkadot API Integration: Core layers for interacting with multiple networks simultaneously
5. Parachain Support Framework: Extensible architecture for parachain-specific functionality
6. Transaction Builder UI: Visual tools for transaction creation and submission
7. Component Templates: Pre-built solutions for common blockchain interactions
8. Export System: Functionality to export components for production use

How This Benefits the Ecosystem

The PAPI Interactive Console addresses a critical gap in the Polkadot developer experience:

• Lowers Barriers to Entry: Web developers can leverage their existing knowledge
• Accelerates Development: Instantly test and iterate on blockchain interactions
• Enhances Education: Learn by doing with immediate feedback
• Fosters Experimentation: Try novel approaches without costly setup time
• Simplifies Parachain Onboarding: Templates for parachain-specific interactions

We believe this tool will significantly expand the Polkadot developer ecosystem by making blockchain development accessible to the millions of React developers worldwide.

Fast-Grants Proposal

We’re excited to announce that we’ve submitted a proposal to the Polkadot Fast-Grants Programme to accelerate the development of these enhancements. Our proposal outlines a 50-day development schedule with clear milestones and deliverables.

You can find our proposal here: PAPI Interactive Console Proposal

Community Involvement

We invite the community to:

1. Try the current version: Visit papi-simulator.aipop.fun and experiment with the interface
2. Provide feedback: What features would you find most valuable?
3. Share use cases: How would you leverage this tool in your development workflow?
4. Support our proposal: If you see value in this project, your voice in the community matters

Connect With Us

• GitHub: github.com/developerfred/papi-simulator
• Contact: codingsh@pm.me

We’re passionate about making Polkadot development more accessible and efficient. The PAPI Interactive Console represents our commitment to reducing friction for developers and accelerating the growth of the Polkadot ecosystem.

Looking forward to your thoughts and feedback!

Fred (codingsh) aipop.fun Team

[evgeny-s]

Something not cool with the light theme:

• Tutorial text is not visible
• Selected network is not visible
• Theme switcher is not working

[evgeny-s]

Run button is not visible as well

[codingsh]

Thanks to light theme QA, I will open issues in the repository and make the changes this week!

[codingsh]

@evgeny-s, thank you for your feedback! The issue has been fixed, and the updated version is now available at GitHub - developerfred/papi-simulator: Polkadot-Api - Learning Tool.

you can try on: https://papi-simulator.aipop.fun

[evgeny-s]

I confirm that it works as expected now, thanks!

[mcornholio]

Hi!
Looks good, but it doesn’t really interacts with the PAPI yet, does it? I’ve deleted half of the code and it still returns the same output with block numbers that are slightly random.

[codingsh]

We still don’t have direct interaction with the PAPI, the important thing here is for developers to have an easy interface to learn how to build with the PAPI, in my second milestone the components in react with real interaction with the PAPI will be available, many good things are coming

[valentinfernandez1]

I’d say that a must have for this to be truly useful for the ecosystem is to have the ability to connect to custom chains/parachains not just the relay chains (locally or remote).

[byteme]

It looks promising as a proof-of-concept, but… I’m confused

According to the project link you shared, the first milestone includes most of the core functionality. However, although you indicate that the first milestone has been completed, the current state feels more like a basic mock-up rather than a feature-complete implementation. Taking a look at the goals of the first milestone:

1. Code Editor: Upgrade the Monaco editor with TypeScript-specific features for Polkadot API development, including autocompletion for polkadot-api functions, inline type checking, and parameter hints.

It has a few PAPI functions, but it gets completely lost on anything else. For instance, it’s not able to show parameter hints or type-checking for any interaction with the typedApi beyond “typedApi.query”.

2. React Component Preview Panel: Implement the component rendering environment that displays real-time previews of React components as they are being edited, with proper error boundaries and state preservation.

This feature was difficult to discover, to open it is by clicking on the “Typescript” button above the code editor. But unfortunately, it doesn’t work, when activated it breaks with an error making it unusable.

Goals 3-5 is regarding state management, connection to a chain and its parachains.

The current implementation gives the impression that the code editor is still in a mocked-up state. Modifying the code and pressing run doesn’t really change anything about the result or what’s shown in the console. Or using the default example for “query account balance” on polkadot shows as if ALICE has 1223 DOT, which isn’t the actual value of ALICE.

And lastly, the UI is full of features that are half-implemented or non-functional. I would suggest focusing on completing and stabilizing individual components before moving to the next feature.

The concept is nice, but in its current state (version 1.0.0…) is not really usable as a sandbox. I’m looking forward to seeing this project come into live, but I’m worried it will get abandoned or not completed to its full potential if the current state represents “milestone 1”.