diff --git a/src/main/data/middlewares/pipeline.ts b/src/main/data/middlewares/pipeline.ts
index f188d77c..4c452f9a 100644
--- a/src/main/data/middlewares/pipeline.ts
+++ b/src/main/data/middlewares/pipeline.ts
@@ -24,6 +24,7 @@ import {
     setProperties,
     setTtsEngineState,
     setTtsEngineFeatures,
+    requestStylesheetParameters,
 } from 'shared/data/slices/pipeline'
 
 import {
@@ -367,7 +368,7 @@ export function pipelineMiddleware({ getState, dispatch }) {
                                 dispatch(setTtsEngineFeatures(features))
                             })
                             .catch((e) => {
-                                error('useWebservice', e)
+                                error('useWebservice', e, e.parsedText)
                                 if (
                                     selectStatus(getState()) ==
                                     PipelineStatus.RUNNING
@@ -687,6 +688,80 @@ export function pipelineMiddleware({ getState, dispatch }) {
                     }
                 }, 1000)
                 break
+            case requestStylesheetParameters.type:
+                const job = action.payload as Job
+                const stylesheet = job.jobRequest.options.filter(
+                    (option) => option.name === 'stylesheet'
+                )[0]
+                if (
+                    !stylesheet ||
+                    !stylesheet.value ||
+                    stylesheet.value == ''
+                ) {
+                    // No parameters provided, load defaults
+                    dispatch(
+                        updateJob({
+                            ...job,
+                            stylesheetParameters: [],
+                        })
+                    )
+                } else {
+                    pipelineAPI
+                        .fetchStylesheetParameters(job)(webservice)
+                        .then((parameters) => {
+                            console.log('received parameters', parameters)
+                            // update job options with new parameters
+                            const options = [...job.jobRequest.options]
+                            for (let item of parameters) {
+                                const existingOption = options.find(
+                                    (o) => o.name === item.name
+                                )
+                                if (existingOption !== undefined) {
+                                    existingOption.value = item.default
+                                } else {
+                                    // For now, only consider non-uri parameters
+                                    options.push({
+                                        name: item.name,
+                                        value: item.default,
+                                        isFile: false,
+                                    })
+                                }
+                            }
+                            // Also send back the parameters to the UI
+                            // for composition of the script options
+                            dispatch(
+                                updateJob({
+                                    ...job,
+                                    jobRequest: {
+                                        ...job.jobRequest,
+                                        options: [...options],
+                                    },
+                                    stylesheetParameters: parameters,
+                                })
+                            )
+                        })
+                        .catch((e) => {
+                            error('error fetching stylesheet parameters', e)
+                            dispatch(
+                                updateJob({
+                                    ...job,
+                                    jobData: {
+                                        ...job.jobData,
+                                        status: JobStatus.ERROR,
+                                    },
+                                    errors: [
+                                        {
+                                            error:
+                                                e instanceof ParserException
+                                                    ? e.parsedText
+                                                    : String(e),
+                                        },
+                                    ],
+                                })
+                            )
+                        })
+                }
+                break
             default:
                 if (action.type.startsWith('settings/')) {
                     // FIXME : check if local pipeline props have changed and
diff --git a/src/renderer/components/Fields/FormField.tsx b/src/renderer/components/Fields/FormField.tsx
index 1a4932c7..298f1a36 100644
--- a/src/renderer/components/Fields/FormField.tsx
+++ b/src/renderer/components/Fields/FormField.tsx
@@ -23,26 +23,19 @@ export function FormField({
 }: {
     item: ScriptItemBase
     idprefix: string
-    onChange: (string, ScriptItemBase) => void // function to set the value in a parent-level collection.
+    onChange: (value: any, item: ScriptItemBase) => void // function to set the value in a parent-level collection.
     initialValue: any // the initial value for the field
 }) {
-    const [value, setValue] = useState(initialValue)
     const [checked, setChecked] = useState(true)
     let controlId = `${idprefix}-${item.name}`
 
-    let onChangeValue = (newValue, scriptItem) => {
-        setValue(newValue)
-        onChange(newValue, scriptItem)
-    }
-    let dialogOpts =
-        item.type == 'anyFileURI'
-            ? ['openFile']
-            : item.type == 'anyDirURI'
-            ? ['openDirectory']
-            : ['openFile', 'openDirectory']
+    let dialogOpts = ['anyFileURI', 'anyURI'].includes(item.type)
+        ? ['openFile']
+        : item.type == 'anyDirURI'
+        ? ['openDirectory']
+        : ['openFile', 'openDirectory']
 
     const { settings } = useWindowStore()
-
     let matchType = (item) => {
         let inputType = findInputType(item.type)
         if (inputType == 'file') {
@@ -54,11 +47,11 @@ export function FormField({
                         elemId={controlId}
                         mediaType={item.mediaType}
                         name={item.name}
-                        onChange={(filenames) => onChangeValue(filenames, item)}
+                        onChange={(filenames) => onChange(filenames, item)}
                         useSystemPath={false}
                         buttonLabel="Browse"
                         required={item.required}
-                        initialValue={value}
+                        initialValue={initialValue}
                         ordered={item.ordered}
                     />
                 )
@@ -77,13 +70,11 @@ export function FormField({
                             elemId={controlId}
                             mediaType={item.mediaType}
                             name={item.name}
-                            onChange={(filename) =>
-                                onChangeValue(filename, item)
-                            }
+                            onChange={(filename) => onChange(filename, item)}
                             useSystemPath={false}
                             buttonLabel="Browse"
                             required={item.required}
-                            initialValue={value}
+                            initialValue={initialValue}
                         />
                     )
                 }
@@ -94,9 +85,11 @@ export function FormField({
                     <input
                         type={inputType}
                         required={item.required}
-                        onChange={(e) => onChangeValue(e.target.checked, item)}
+                        onChange={(e) => onChange(e.target.checked, item)}
                         id={controlId}
-                        checked={value === 'true' || value === true}
+                        checked={
+                            initialValue === 'true' || initialValue === true
+                        }
                     ></input>
                 </>
             )
@@ -104,8 +97,8 @@ export function FormField({
             return (
                 <CustomField
                     item={item}
-                    onChange={(newValue) => onChangeValue(newValue, item)}
-                    initialValue={value ?? ''}
+                    onChange={(newValue) => onChange(newValue, item)}
+                    initialValue={initialValue ?? ''}
                     controlId={controlId}
                 />
             )
@@ -115,10 +108,9 @@ export function FormField({
                     <input
                         type={inputType}
                         required={item.required}
-                        // @ts-ignore
-                        value={value ?? ''}
+                        value={initialValue ?? ''}
                         id={controlId}
-                        onChange={(e) => onChangeValue(e.target.value, item)}
+                        onChange={(e) => onChange(e.target.value, item)}
                     ></input>
                 </>
             )
diff --git a/src/renderer/components/ScriptForm/index.tsx b/src/renderer/components/ScriptForm/index.tsx
index ad093b23..8f211a76 100644
--- a/src/renderer/components/ScriptForm/index.tsx
+++ b/src/renderer/components/ScriptForm/index.tsx
@@ -1,7 +1,13 @@
 /*
 Fill out fields for a new job and submit it
 */
-import { Job, Script } from 'shared/types'
+import {
+    Job,
+    NameValue,
+    Script,
+    ScriptItemBase,
+    ScriptOption,
+} from 'shared/types'
 import { useState } from 'react'
 import { useWindowStore } from 'renderer/store'
 import {
@@ -10,7 +16,11 @@ import {
     getAllRequired,
     ID,
 } from 'renderer/utils/utils'
-import { restoreJob, runJob } from 'shared/data/slices/pipeline'
+import {
+    requestStylesheetParameters,
+    restoreJob,
+    runJob,
+} from 'shared/data/slices/pipeline'
 import {
     addJob,
     removeJob,
@@ -24,7 +34,7 @@ import { FormField } from '../Fields/FormField'
 const { App } = window
 
 // update the array and return a new copy of it
-let updateArrayValue = (value, data, arr) => {
+let updateArrayValue = (value: any, data: ScriptItemBase, arr: NameValue[]) => {
     let arr2 = arr.map((i) => (i.name == data.name ? { ...i, value } : i))
     return arr2
 }
@@ -37,23 +47,77 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
     let optional = getAllOptional(script)
     const { settings } = useWindowStore()
 
-    let saveValueInJobRequest = (value, data) => {
+    // for to-pef scripts
+    // the job request must be splitted in two step
+    // First only display the following parameters
+    // - inputs,
+    // - stylesheet,
+    // - page-width
+    // - page-height
+
+    // Cannot use const isBrailleJob = optional.findIndex((item) => item.name === 'stylesheet')
+    // as other non braille steps have a stylesheet option
+    const isBrailleJob = (script && script.id.endsWith('to-pef')) || false
+    // Filter out the options that are to be defined in the first step of braille script
+    const filteredOptions = ['stylesheet', 'page-width', 'page-height']
+    const hiddenOptions = ['transform', 'stylesheet-parameters']
+    if (isBrailleJob) {
+        optional = optional.filter((item) =>
+            filteredOptions.includes(item.name)
+        )
+    }
+
+    // After requestStylesheetParameters, the engine will return a list of new
+    // script options. Those are stored separatly in the job.stylesheetParameters
+    // properties
+    // When this property is set
+    if (isBrailleJob && job.stylesheetParameters != null) {
+        required = []
+        optional = [
+            ...getAllOptional(script)
+                .filter((item) => !filteredOptions.includes(item.name))
+                .filter((item) => !hiddenOptions.includes(item.name)),
+        ]
+        for (let item of job.stylesheetParameters) {
+            const existingOption = optional.find(
+                (o) => o.name === item.name
+            ) as ScriptOption | undefined
+            if (existingOption !== undefined) {
+                existingOption.default = item.default
+            } else {
+                optional.push(item)
+            }
+        }
+    }
+
+    // Allow the user to go back to first inputs and options set
+    let previous = async (e) => {
+        e.preventDefault()
+        App.store.dispatch(
+            updateJob({
+                ...job,
+                stylesheetParameters: null,
+            })
+        )
+    }
+
+    let saveValueInJobRequest = (value: any, item: ScriptItemBase) => {
         if (!job.jobRequest) {
             return
         }
         let inputs = [...job.jobRequest.inputs]
         let options = [...job.jobRequest.options]
 
-        if (data.mediaType.includes('text/css')) {
+        if (item.mediaType?.includes('text/css')) {
             // the css filenames are already formatted by our file widget as 'file:///'...
             // so i don't think they need to be modified before getting sent to the engine
             // but this block is a placeholder just in case we have to change it
             // i haven't tested this on windows as of now
         }
-        if (data.kind == 'input') {
-            inputs = updateArrayValue(value, data, inputs)
+        if (item.kind == 'input') {
+            inputs = updateArrayValue(value, item, inputs)
         } else {
-            options = updateArrayValue(value, data, options)
+            options = updateArrayValue(value, item, options)
         }
 
         App.store.dispatch(
@@ -71,15 +135,18 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
     // submit a job
     let onSubmit = async (e) => {
         e.preventDefault()
-        setSubmitInProgress(true)
-
-        App.store.dispatch(
-            runJob({
-                ...job,
-                jobRequest: job.jobRequest,
-            })
-        )
-        setSubmitInProgress(false)
+        if (isBrailleJob && job.stylesheetParameters == null) {
+            App.store.dispatch(requestStylesheetParameters(job))
+        } else {
+            setSubmitInProgress(true)
+            App.store.dispatch(
+                runJob({
+                    ...job,
+                    jobRequest: job.jobRequest,
+                })
+            )
+            setSubmitInProgress(false)
+        }
     }
 
     return (
@@ -112,33 +179,37 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
             {!submitInProgress ? (
                 <form onSubmit={onSubmit} id={`${ID(job.internalId)}-form`}>
                     <div className="form-sections">
-                        <section
-                            className="required-fields"
-                            aria-labelledby={`${ID(job.internalId)}-required`}
-                        >
-                            <h2 id={`${ID(job.internalId)}-required`}>
-                                Required information
-                            </h2>
-                            <ul className="fields">
-                                {required.map((item, idx) => (
-                                    <li key={idx}>
-                                        <FormField
-                                            item={item}
-                                            key={idx}
-                                            idprefix={`${ID(
-                                                job.internalId
-                                            )}-required`}
-                                            onChange={saveValueInJobRequest}
-                                            initialValue={findValue(
-                                                item.name,
-                                                item.kind,
-                                                job.jobRequest
-                                            )}
-                                        />
-                                    </li>
-                                ))}
-                            </ul>
-                        </section>
+                        {required.length > 0 && (
+                            <section
+                                className="required-fields"
+                                aria-labelledby={`${ID(
+                                    job.internalId
+                                )}-required`}
+                            >
+                                <h2 id={`${ID(job.internalId)}-required`}>
+                                    Required information
+                                </h2>
+                                <ul className="fields">
+                                    {required.map((item, idx) => (
+                                        <li key={idx}>
+                                            <FormField
+                                                item={item}
+                                                key={idx}
+                                                idprefix={`${ID(
+                                                    job.internalId
+                                                )}-required`}
+                                                onChange={saveValueInJobRequest}
+                                                initialValue={findValue(
+                                                    item.name,
+                                                    item.kind,
+                                                    job.jobRequest
+                                                )}
+                                            />
+                                        </li>
+                                    ))}
+                                </ul>
+                            </section>
+                        )}
                         {optional.length > 0 ? (
                             <section
                                 className="optional-fields"
@@ -151,50 +222,33 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
                                 </h2>
                                 <ul className="fields">
                                     {optional.map((item, idx) =>
-                                        item.mediaType.includes(
+                                        item.mediaType?.includes(
                                             'application/vnd.pipeline.tts-config+xml'
                                         ) ? (
                                             '' // skip it, we don't need to provide a visual field for this option, it's set globally
                                         ) : (
-                                            <li key={idx}>
-                                                {item.mediaType.includes(
-                                                    'text/css'
-                                                ) ? (
-                                                    <FormField
-                                                        item={{
-                                                            ...item,
-                                                            kind: 'anyFile',
-                                                        }}
-                                                        key={idx}
-                                                        idprefix={`${ID(
-                                                            job.internalId
-                                                        )}-optional`}
-                                                        onChange={
-                                                            saveValueInJobRequest
-                                                        }
-                                                        initialValue={findValue(
-                                                            item.name,
-                                                            'anyFile',
-                                                            job.jobRequest
-                                                        )}
-                                                    />
-                                                ) : (
-                                                    <FormField
-                                                        item={item}
-                                                        key={idx}
-                                                        idprefix={`${ID(
-                                                            job.internalId
-                                                        )}-optional`}
-                                                        onChange={
-                                                            saveValueInJobRequest
-                                                        }
-                                                        initialValue={findValue(
-                                                            item.name,
-                                                            item.kind,
-                                                            job.jobRequest
-                                                        )}
-                                                    />
-                                                )}
+                                            <li
+                                                key={`${ID(job.internalId)}-${
+                                                    item.name
+                                                }-li`}
+                                            >
+                                                <FormField
+                                                    item={item}
+                                                    key={`${ID(
+                                                        job.internalId
+                                                    )}-${item.name}-FormField`}
+                                                    idprefix={`${ID(
+                                                        job.internalId
+                                                    )}-${item.name}-optional`}
+                                                    onChange={
+                                                        saveValueInJobRequest
+                                                    }
+                                                    initialValue={findValue(
+                                                        item.name,
+                                                        item.kind,
+                                                        job.jobRequest
+                                                    )}
+                                                />
                                             </li>
                                         )
                                     )}
@@ -205,9 +259,20 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
                         )}
                     </div>
                     <div className="form-buttons">
-                        <button className="run" type="submit">
-                            Run
-                        </button>
+                        {isBrailleJob && job.stylesheetParameters != null && (
+                            <button className="run" onClick={previous}>
+                                Back
+                            </button>
+                        )}
+                        {isBrailleJob && job.stylesheetParameters == null ? (
+                            <button className="run" type="submit">
+                                Next
+                            </button>
+                        ) : (
+                            <button className="run" type="submit">
+                                Run
+                            </button>
+                        )}
                         <button
                             className="cancel"
                             type="reset"
diff --git a/src/renderer/store/index.tsx b/src/renderer/store/index.tsx
index 89d99b02..efa10ad8 100644
--- a/src/renderer/store/index.tsx
+++ b/src/renderer/store/index.tsx
@@ -1,53 +1,16 @@
 import { useContext, createContext, useState, useEffect } from 'react'
-import {
-    PipelineState,
-    PipelineStatus,
-    Webservice,
-    baseurl,
-    Script,
-    ApplicationSettings,
-} from 'shared/types'
-import {
-    scriptsXmlToJson,
-    scriptXmlToJson,
-} from 'shared/parser/pipelineXmlConverter'
 import { RootState } from 'shared/types/store'
 import { getInitialState } from 'shared/data/store'
 import { slices } from 'shared/data/slices'
 
 export interface WindowStore {
     reduxStore: RootState
-    // about: {
-    //     isOpen: boolean
-    // }
-    // pipeline: PipelineState
-    // messages: Array<string>
-    // errors: Array<string>
-    // scripts: Array<Script>
-    // settings: ApplicationSettings
-    // // react dispatcher
-    // setPipelineState?: React.Dispatch<React.SetStateAction<PipelineState>>
-    // setAboutWindowState?: React.Dispatch<
-    //     React.SetStateAction<{ isOpen: boolean }>
-    // >
-    // setPipelineErrors?: React.Dispatch<React.SetStateAction<string[]>>
-    // setPipelineMessages?: React.Dispatch<React.SetStateAction<string[]>>
-    // setSettings?: React.Dispatch<React.SetStateAction<ApplicationSettings>>
 }
 
 const { App } = window
 
 const WindowStoreContext = createContext({
     reduxStore: getInitialState(),
-    // about: {
-    //     isOpen: false,
-    // },
-    // pipeline: {
-    //     status: PipelineStatus.UNKNOWN,
-    // },
-    // messages: [],
-    // errors: [],
-    // scripts: [],
 } as WindowStore)
 
 export function useWindowStore() {
@@ -72,22 +35,8 @@ export function WindowStoreProvider({ children }) {
         }
     )
 
-    // const [about, setAboutWindowState] = useState({
-    //     isOpen: false,
-    // })
-    // const [pipeline, setPipelineState] = useState<PipelineState>({
-    //     status: PipelineStatus.UNKNOWN,
-    // })
-    // const [messages, setPipelineMessages] = useState<Array<string>>([])
-    // const [errors, setPipelineErrors] = useState<Array<string>>([])
-    // const [scripts, setScripts] = useState<Array<Script>>([])
-    // const [settings, setSettings] = useState<ApplicationSettings>({
-    //     downloadFolder: '',
-    // })
-
     useEffect(() => {
         slices.forEach((slice) => {
-            //console.log('useEffect', slice)
             Object.entries(slice.actions).forEach(([name, { type }]) => {
                 console.log('create listeners on ', type)
                 App.store.onSliceUpdate(type, (newSliceState) => {
@@ -101,17 +50,6 @@ export function WindowStoreProvider({ children }) {
 
     const sharedStore = {
         reduxStore: reduxStore,
-        // about: about,
-        // pipeline: pipeline,
-        // messages: messages,
-        // errors: errors,
-        // scripts: scripts,
-        // settings: settings,
-        // setAboutWindowState,
-        // setPipelineState,
-        // setPipelineMessages,
-        // setPipelineErrors,
-        // setSettings,
     }
 
     return (
diff --git a/src/renderer/utils/utils.ts b/src/renderer/utils/utils.ts
index 7a81cb5e..d8263d2f 100644
--- a/src/renderer/utils/utils.ts
+++ b/src/renderer/utils/utils.ts
@@ -39,9 +39,7 @@ export function findValue(name: string, kind: string, jobRequest: JobRequest) {
 
 export function findInputType(type) {
     let inputType = ''
-    if (type == 'anyFileURI') {
-        inputType = 'file'
-    } else if (type == 'anyDirURI') {
+    if (['anyFileURI', 'anyDirURI', 'anyURI'].includes(type)) {
         inputType = 'file'
     } else if (['xsd:dateTime', 'xs:dateTime', 'datetime'].includes(type)) {
         inputType = 'datetime-local'
diff --git a/src/shared/constants/filetypes.ts b/src/shared/constants/filetypes.ts
index 5925d161..ca625f57 100644
--- a/src/shared/constants/filetypes.ts
+++ b/src/shared/constants/filetypes.ts
@@ -32,13 +32,17 @@ const mediaTypesFileFilters = {
         extensions: ['xml'],
     },
     'text/html': {
-        name: '',
-        extensions: [''],
-    },
-    'text/css': {
         name: 'HTML Document',
         extensions: ['html'],
     },
+    'text/css': {
+        name: 'CSS Document',
+        extensions: ['css'],
+    },
+    'text/x-scss': {
+        name: 'SCSS Document',
+        extensions: ['scss'],
+    },
     'application/xslt+xml': {
         name: 'XSLT Document',
         extensions: ['xsl', 'xslt'],
diff --git a/src/shared/data/apis/pipeline.ts b/src/shared/data/apis/pipeline.ts
index 49634ea3..9b99ef3c 100644
--- a/src/shared/data/apis/pipeline.ts
+++ b/src/shared/data/apis/pipeline.ts
@@ -26,6 +26,8 @@ import { jobResponseXmlToJson } from 'shared/parser/pipelineXmlConverter/jobResp
 import { propertiesXmlToJson } from 'shared/parser/pipelineXmlConverter/propertiesXmlToJson'
 import { propertyToXml } from 'shared/parser/pipelineXmlConverter/propertyToXml'
 import { ttsEnginesToJson } from 'shared/parser/pipelineXmlConverter/ttsEnginesToJson'
+import { parametersXmlToJson } from 'shared/parser/pipelineXmlConverter/parametersXmlToJson'
+import { jobToStylesheetParametersXml } from 'shared/parser/pipelineXmlConverter/jobToStylesheetParametersXml'
 
 //import fetch, { Response, RequestInit } from 'node-fetch'
 //import { info, error } from 'electron-log'
@@ -204,4 +206,22 @@ export class PipelineAPI {
             (text) => ttsEnginesToJson(text)
         )
     }
+    // New /stylesheet-parameters endpoint : https://github.com/daisy/pipeline-ui/issues/198
+    // and https://github.com/daisy/pipeline/issues/750
+    /**
+     * Fetch new script options from a braille targeted job with
+     * inputs, stylesheet, page-width and page-height parameters set
+     * @param j the braille job
+     * @returns the script options to use for the job
+     */
+    fetchStylesheetParameters(j: Job) {
+        return this.createPipelineFetchFunction(
+            (ws) => `${baseurl(ws)}/stylesheet-parameters`,
+            (text) => parametersXmlToJson(text),
+            {
+                method: 'POST',
+                body: jobToStylesheetParametersXml(j),
+            }
+        )
+    }
 }
diff --git a/src/shared/data/slices/pipeline.ts b/src/shared/data/slices/pipeline.ts
index 5d4437ab..7963ccea 100644
--- a/src/shared/data/slices/pipeline.ts
+++ b/src/shared/data/slices/pipeline.ts
@@ -74,7 +74,7 @@ export const pipeline = createSlice({
         /**
          * Stop the pipeline instance
          *
-         * (Middleware handled action )
+         * (Middleware handled action)
          * @param state current pipeline state
          * @param action payload with a boolean : if true, then app is closing
          */
@@ -239,6 +239,19 @@ export const pipeline = createSlice({
                 state.selectedJobId = state.jobs[0].internalId
             }
         },
+        /**
+         * Request script options from stylesheet parameters endpoint
+         *
+         * (Middleware handled action )
+         * @param state current pipeline state
+         * @param action payload with a boolean : if true, then app is closing
+         */
+        requestStylesheetParameters: (
+            state: PipelineState,
+            param: PayloadAction<Job>
+        ) => {
+            // Handled by the middleware
+        },
         runJob: (state: PipelineState, param: PayloadAction<Job>) => {
             if (param.payload.jobRequest) {
                 // Retrieve latest JobRequest payload
@@ -349,6 +362,7 @@ export const {
     setProperties,
     setTtsEngineState,
     setTtsEngineFeatures,
+    requestStylesheetParameters,
 } = pipeline.actions
 
 export const selectors = {
diff --git a/src/shared/parser/pipelineXmlConverter/jobToStylesheetParametersXml.ts b/src/shared/parser/pipelineXmlConverter/jobToStylesheetParametersXml.ts
new file mode 100644
index 00000000..c80a9574
--- /dev/null
+++ b/src/shared/parser/pipelineXmlConverter/jobToStylesheetParametersXml.ts
@@ -0,0 +1,39 @@
+import { Job } from 'shared/types'
+
+/**
+ * Build a request xml string that can be sent to pipeline on the
+ * "stylesheet-parameters" using the job inputs and the following
+ * identified options :
+ * - stylesheet
+ * - page-width
+ * - page-height
+ * @param {Job} j the job to be used for building the xml
+ * @returns {string} an xml string that can be sent to a DP2 engine to get
+ * new script parameters
+ */
+function jobToStylesheetParametersXml(j: Job): string {
+    const stylesheet = j.jobRequest.options.filter(
+        (option) => option.name === 'stylesheet'
+    )[0]
+    const width = j.jobRequest.options.filter(
+        (option) => option.name === 'page-width'
+    )[0]
+    const height = j.jobRequest.options.filter(
+        (option) => option.name === 'page-height'
+    )[0]
+    return `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<parameters xmlns="http://www.daisy.org/ns/pipeline/data">
+    <media value="embossed AND (width:${width.value}) AND (height:${
+        height.value
+    })"/>
+    <userStylesheets>${
+        stylesheet && stylesheet.value && `<file href="${stylesheet.value}"/>`
+    }</userStylesheets>
+    <sourceDocument>${j.jobRequest.inputs
+        .filter((input) => input.isFile && !input.name.endsWith('.scss'))
+        .map((input) => `<file href="${input.value}"/>`)
+        .join('')}</sourceDocument>
+</parameters>`
+}
+
+export { jobToStylesheetParametersXml }
diff --git a/src/shared/parser/pipelineXmlConverter/parametersXmlToJson.ts b/src/shared/parser/pipelineXmlConverter/parametersXmlToJson.ts
new file mode 100644
index 00000000..6f8aac38
--- /dev/null
+++ b/src/shared/parser/pipelineXmlConverter/parametersXmlToJson.ts
@@ -0,0 +1,24 @@
+import { Job, ScriptOption } from 'shared/types'
+import { parseXml } from './parser'
+
+// Get new script options from a stylesheet parameters options
+function parametersXmlToJson(xmlString: string): ScriptOption[] {
+    let parametersElm = parseXml(xmlString, 'parameters')
+    const result: ScriptOption[] = []
+    return Array.from(parametersElm.getElementsByTagName('parameter')).map(
+        (propElem: any) =>
+            ({
+                desc: propElem.getAttribute('description'),
+                name: propElem.getAttribute('name'),
+                sequence: propElem.getAttribute('sequence') == 'true', // should always be false
+                required: propElem.getAttribute('required') == 'true', // should always be false
+                nicename: propElem.getAttribute('nicename'),
+                ordered: propElem.getAttribute('ordered') == 'true', // should always be false
+                type: propElem.getAttribute('type'),
+                default: propElem.getAttribute('default'),
+                kind: 'option',
+            } as ScriptOption)
+    )
+}
+
+export { parametersXmlToJson }
diff --git a/src/shared/types/pipeline.ts b/src/shared/types/pipeline.ts
index 6ab0a835..fd2be98a 100644
--- a/src/shared/types/pipeline.ts
+++ b/src/shared/types/pipeline.ts
@@ -199,6 +199,11 @@ export type Job = {
     invisible?: boolean
     // jobRequest.script also has script info (returned from ws);
     // however, storing it separately gives us access to more details
+    /**
+     * For job with a stylesheet parameter, supplementary options are retrieved
+     * from the pipeline stylesheet-parameters end point and stored here.
+     */
+    stylesheetParameters?: ScriptOption[]
 }
 // JobData is the JSON representation of Pipeline WS data for a single job
 export type JobData = {