📋 Priostack Tasklist Widget

Embeddable vanilla JS component · Zero dependencies
Live demo
Configure the widget below, then see it update in real time on the right.
⚙️ Configuration
🔌 Embed snippet

        

      


      

        
📡 Events emitted

        

          
Listen with addEventListener on the element:

          
 -  waiting for events  - 

        

      

    


    
    

      

        
👁 Live preview

        

          
        

      

    


  


  


  
  

    
📋 <priostack-list>  -  Filterable list

    
Display any array of items; optionally show a live-filter search box above.

    

      

        
        
        
 -  select an item  - 

      

      

        
<priostack-list filterable
  items='[
    {"id":"1","label":"Loan Approval","sublabel":"BPMN","badge":"active"},
    {"id":"2","label":"Onboarding","sublabel":"BPMN","badge":"completed"}
  ]'
></priostack-list>

      

    

  


  


  
  

    
📊 <priostack-table>  -  Sortable data table

    
Click any column header to sort ascending/descending.

    

      

        
        
      

      

        
<priostack-table
  columns='[{"key":"name","label":"Process"},{"key":"status","label":"Status"}]'
  rows='[{"name":"Loan Approval","status":"ACTIVE"}]'
></priostack-table>

      

    

  


  


  
  

    
🪪 <priostack-card>  -  Detail card

    
Show a structured label-value card for an instance, task, or entity.

    

      

        
        
      

      

        
<priostack-card
  title="Task: Review Loan Application"
  fields='[
    {"label":"Status","value":"ACTIVE","badge":"active"},
    {"label":"Assignee","value":"alice@acme.com"}
  ]'
></priostack-card>

      

    

  


  


  
  

    
🔍 <priostack-search>  -  Debounced search box

    
Fires a ps-search event with a configurable debounce delay.

    

      

        
        
 -  type to see events  - 

      

      

        
<priostack-search placeholder="Search…" debounce="300" onsearch="handleSearch"></priostack-search>

      

    

  


  


  
  

    
🗂️ <priostack-combo>  -  Combo-box / autocomplete

    
Filterable dropdown with keyboard-accessible options.

    

      

        
        
        
 -  select an option  - 

      

      

        
<priostack-combo options='[{"value":"a","label":"Option A"}]' onchange="onComboChange"></priostack-combo>

      

    

  


  


  
  

    
▶ <priostack-start-btn>  -  Start process / case

    
Inline start-instance flow. Supports BPMN and CMMN. Fires ps-started on success.

    

      

        

          

            
BPMN

            
            
          

          

            
CMMN

            
            
          

        

        
 -  start events appear here  - 

      

      

        
<priostack-start-btn
  process-id="loan_approval" kind="bpmn"
  label="▶ Start" base-url="https://app.priostack.com" api-key="ps_…"
></priostack-start-btn>