Developer Console

The Protokol Developer Console is a powerful, browser-based development tool that lets you interact with your Protokol platform in real-time. Write and execute JavaScript code, query your data, test APIs, and automate workflows—all without leaving your browser.

What is the Developer Console?

Think of it as an advanced JavaScript playground specifically designed for Protokol. Whether you're testing a new integration, exploring your data structure, or prototyping automation scripts, the console provides an immediate, interactive environment to get work done.

Key Features

• 🚀 Instant Execution - Run code and see results immediately
• 💡 Smart Code Editor - Syntax highlighting, auto-completion, and error detection
• 📦 Full SDK Access - Complete access to Protokol SDK v0.9 (stable) and v0.10 (beta)
• 🎯 Modern JavaScript - Full ES6+ support including async/await and arrow functions
• 📊 Visual Data Explorer - Interactive tree view for exploring complex objects
• 🕒 Command History - Never lose your work with automatic history saving
• ⚡ Zero Setup - No installation or configuration required

Getting Started

Opening the Console

Access the console using any of these methods:

Keyboard Shortcut (Fastest)

• Windows/Linux: Ctrl + Shift + K
• macOS: Cmd + Shift + K

User Menu

1. Click your profile icon in the top-right corner
2. Select "Console" from the dropdown menu

Your First Command

Let's start simple. Open the console and type:

console.log("Hello, Protokol!")

Press Ctrl/Cmd + Enter to execute. You'll see your message appear in the output panel below.

Fetching Your First Data

Now let's query some real data from your platform:

import { Component } from '@ptkl/sdk'

// Create a component instance
const users = new Component('users')

// Fetch the first 10 users
const result = await users.find({
  currentPage: 1,
  perPage: 10
})

// Display the results
console.log(`Found ${result.total} total users`)
console.log(result.data)

That's it! You've just queried your platform using the SDK.

Working with the SDK

Importing Modules

The console supports ES6 import syntax for a clean, modern development experience:

import { Component, Thunder, Integrations } from '@ptkl/sdk'

Available SDK Modules

Module	Description	Example Use Case
Component	Query and manipulate component data	Fetch users, products, or any custom component
Thunder	Execute server-side functions	Run custom business logic
Integrations	Manage third-party integrations	List available integrations
Project	Project-level operations	Access project settings
Functions	Manage cloud functions	Deploy and execute functions

SDK Versions

Protokol offers two SDK versions:

Stable (v0.9) - Production-ready

import { Component } from '@ptkl/sdk'

Beta (v0.10) - Latest features

import { Component } from '@ptkl/sdk/beta'

Tip

Use the stable version for production scripts and beta for testing new features.

Common Use Cases

1. Data Exploration

Quickly explore your data structure:

import { Component } from '@ptkl/sdk'

const products = new Component('products')
const sample = await products.findOne('product_id_here')

// Results display in an interactive tree view
console.log(sample)

2. Testing Queries

Prototype and test complex queries before implementing them:

import { Component } from '@ptkl/sdk'

const orders = new Component('orders')
const recentOrders = await orders.find({
  filters: {
    status: 'completed',
    createdAt: { $gte: '2026-01-01' }
  },
  sort: '-createdAt',
  perPage: 20
})

console.log(`Found ${recentOrders.data.length} recent orders`)
console.log(recentOrders.data)

3. Data Analysis

Analyze your data with built-in utilities:

import { Component } from '@ptkl/sdk'
import _ from 'lodash'

const sales = new Component('sales')
const data = await sales.find({ perPage: 100 })

// Group by category and calculate totals
const byCategory = _.groupBy(data.data, 'category')
const summary = _.mapValues(byCategory, items => ({
  count: items.length,
  total: _.sumBy(items, 'amount')
}))

console.log(summary)

4. Quick Automation

Automate repetitive tasks:

import { Component } from '@ptkl/sdk'

const notifications = new Component('notifications')

// Mark all unread notifications as read
const unread = await notifications.find({
  filters: { read: false },
  perPage: 50
})

for (const notification of unread.data) {
  await notifications.update(notification.id, { read: true })
}

console.log(`Marked ${unread.data.length} notifications as read`)

Utility Libraries

The console includes popular JavaScript utilities to make your work easier.

Lodash

Powerful data manipulation utility:

import _ from 'lodash'

const data = [
  { name: 'Alice', age: 30, city: 'NYC' },
  { name: 'Bob', age: 25, city: 'LA' },
  { name: 'Charlie', age: 30, city: 'NYC' }
]

// Group by age
const grouped = _.groupBy(data, 'age')

// Sort by name
const sorted = _.sortBy(data, 'name')

// Get unique cities
const cities = _.uniq(_.map(data, 'city'))

console.log({ grouped, sorted, cities })

Moment.js

Date and time manipulation:

import moment from 'moment'

// Format current date
const now = moment().format('YYYY-MM-DD HH:mm:ss')

// Calculate relative time
const lastWeek = moment().subtract(7, 'days')
console.log(lastWeek.fromNow()) // "7 days ago"

// Date comparisons
const startOfMonth = moment().startOf('month')
const isAfter = moment().isAfter(startOfMonth)

console.log({ now, lastWeek: lastWeek.format(), isAfter })

Note

Both lodash and moment are available globally as _ and moment even without imports.

Advanced Features

Async/Await Support

Write asynchronous code naturally with top-level await:

import { Component } from '@ptkl/sdk'

// No need to wrap in async function!
const users = new Component('users')
const posts = new Component('posts')

const [userData, postData] = await Promise.all([
  users.find({ perPage: 10 }),
  posts.find({ perPage: 10 })
])

console.log({
  users: userData.total,
  posts: postData.total
})

Error Handling

Handle errors gracefully:

import { Component } from '@ptkl/sdk'

try {
  const component = new Component('users')
  const result = await component.find()
  console.log(result)
} catch (error) {
  console.error('Something went wrong:', error.message)
}

Tips & Best Practices

💡 Tip 1: Save Your Work

The console automatically saves your command history. Access previous commands from the History panel on the left.

💡 Tip 2: Use Console Methods

Log intermediate results to debug your scripts:

import { Component } from '@ptkl/sdk'

const users = new Component('users')
const result = await users.find({ perPage: 10 })

console.log('Total users:', result.total)
console.log('Current page:', result.currentPage)
console.log(result.data)

💡 Tip 3: Interactive Results

Click on objects in the output to expand and explore their structure. This is especially useful for complex API responses.

💡 Tip 4: Keyboard Shortcuts

• Ctrl/Cmd + Enter - Execute code
• Ctrl/Cmd + Shift + K - Toggle console
• Ctrl/Cmd + / - Comment/uncomment line

💡 Tip 5: Test Before Implementing

Use the console to prototype your code before adding it to your application. This saves development time and helps catch issues early.

Practical Examples

Example: Find Active Users from Last Week

import { Component } from '@ptkl/sdk'
import moment from 'moment'

const users = new Component('users')
const weekAgo = moment().subtract(7, 'days').toISOString()

const activeUsers = await users.find({
  filters: {
    lastLoginAt: { $gte: weekAgo },
    status: 'active'
  },
  sort: '-lastLoginAt',
  perPage: 50
})

console.log(`${activeUsers.data.length} active users in the last week`)
console.log(activeUsers.data)

Example: Generate Report Summary

import { Component } from '@ptkl/sdk'
import _ from 'lodash'
import moment from 'moment'

const orders = new Component('orders')
const thisMonth = await orders.find({
  filters: {
    createdAt: { $gte: moment().startOf('month').toISOString() }
  },
  perPage: 1000
})

const summary = {
  totalOrders: thisMonth.data.length,
  totalRevenue: _.sumBy(thisMonth.data, 'total'),
  averageOrderValue: _.meanBy(thisMonth.data, 'total'),
  byStatus: _.countBy(thisMonth.data, 'status')
}

console.log(summary)

Example: Bulk Update Records

import { Component } from '@ptkl/sdk'

const products = new Component('products')

// Find products that need updating
const outdated = await products.find({
  filters: { needsUpdate: true },
  perPage: 50
})

// Update each one
const updated = []
for (const product of outdated.data) {
  const result = await products.update(product.id, {
    needsUpdate: false,
    lastUpdated: new Date().toISOString()
  })
  updated.push(result)
}

console.log(`Updated ${updated.length} products`)
console.log(updated)

Troubleshooting

My import isn't working

Ensure you're using the correct syntax:

// ✅ Correct
import { Component } from '@ptkl/sdk'

// ❌ Incorrect
import Component from '@ptkl/sdk'

Module not found error

Only these modules are available for import:

• @ptkl/sdk
• @ptkl/sdk/beta
• lodash
• moment

Other npm packages cannot be imported in the browser console.

Async operation not waiting

Make sure you use await:

// ✅ Correct
const result = await component.find()

// ❌ Incorrect - returns Promise
const result = component.find()

Code not executing

Common causes:

• Syntax error: Check the editor for red underlines
• Missing semicolons: While optional, they can help avoid issues
• Unclosed brackets: Ensure all {, [, and ( are closed

Keyboard Reference

Action	Windows/Linux	macOS
Execute code	Ctrl + Enter	Cmd + Enter
Toggle console	Ctrl + Shift + K	Cmd + Shift + K
Clear output	Click "Clear" button	Click "Clear" button
Toggle fullscreen	Click fullscreen icon	Click fullscreen icon

Need Help?

• 📚 Complete SDK Reference
• 📧 Support

---

Beta Feature

The Developer Console is currently in Beta. We're actively improving it based on user feedback. If you encounter issues or have suggestions, please let us know!

What's Next?

Now that you're familiar with the console, explore these resources:

• SDK Documentation - Complete API reference
• Component Guide - Working with components